又拍云 Node.js 实现文件上传、删除

Node.js 服务端

使用 Node.js + Express.js 实现 服务端

const express = require("express");
const app = express();
const axios = require("axios");

app.set("port", process.env.PORT || 8082);

// 静态资源目录，这里放在了根目录，生产环境不允许这样
app.use(express.static(__dirname));

// 启动一个端口为 8082 的服务器
app.listen(app.get("port"), () => {
  console.log("http://localhost:" + app.get("port"));
});

准备 Base64、HMAC-SHA1、MD5 实现签名认证

详见：http://docs.upyun.com/api/authorization/#_5

const crypto = require("crypto");

// MD5
function MD5(value) {
  return crypto.createHash("md5").update(value).digest("hex");
}

// Base64
function base64(value) {
  return Buffer.from(value).toString("base64");
}

// hmacsha1
function hmacsha1(secret, value) {
  return crypto
    .createHmac("sha1", secret)
    .update(value, "utf-8")
    .digest()
    .toString("base64");
}

上传、删除接口

const date = new Date().toGMTString();
const bucketname = ""; // 空间名
const key = ""; // 操作员
const secret = ""; // 密码
const upyunUrl = "http://v0.api.upyun.com/";

// Upload
app.get("/api/token/upload", (req, res) => {
  let fileName = (Math.random() * 100000000) >>> 0;
  let expiration = ((Date.now() / 1000) >>> 0) + 30 * 60; // 请求的过期时间，UNIX UTC 时间戳，单位秒。建议设为 30 分钟 http://docs.upyun.com/api/form_api/
  let method = "POST";

  let policy = base64(
    JSON.stringify({
      bucket: bucketname,
      // "save-key": "/" + fileName + "{.suffix}",
      "save-key": "/{filename}{.suffix}",
      expiration: expiration,
    })
  );

  let authorization =
    "UPYUN " +
    key +
    ":" +
    hmacsha1(MD5(secret), method + "&/" + bucketname + "&" + policy);

  res.json({
    msg: "OK",
    code: 200,
    data: {
      authorization: authorization,
      policy: policy,
    },
  });
});

// Delete
app.get("/api/token/del", (req, res) => {
  let item = req.query.item;
  let method = "DELETE";
  let authorization =
    "UPYUN " +
    key +
    ":" +
    hmacsha1(MD5(secret), method + "&/" + bucketname + item + "&" + date);

  axios({
    url: upyunUrl + bucketname + item,
    method: "DELETE",
    headers: {
      Authorization: authorization,
      Date: date,
    },
  })
    .then((response) => {
      res.json({
        msg: "OK",
        code: 200,
        data: {},
      });
    })
    .catch((err) => {
      console.log("err", err);
    });
});

跨域接口调用

const cors = require("cors");

// CORS @see https://github.com/expressjs/cors
app.use(cors());

前端

前端使用 Vue.js 实现

引入 Bootstrap.css

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.css"
/>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- HTML -->
<div id="app">
  <div class="card" style="margin: 50px auto; width: 300px;">
    <div class="card-body">
      <h5 class="card-title">UPYun Upload & Delete</h5>
      <div class="card-text">
        <div class="form-group">
          <label for="file">Upload</label>
          <input
            type="file"
            id="file"
            class="form-control-file"
            @change="onChange"
          />
          <div class="form-text text-muted">
            <ul>
              <li v-for="(item, index) in files">
                {{item}}
                <a href="javascript:;" @click="onDel(item, index)">Del</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

引入 Vue.js、Axios

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

JS

const upUrl = "http://v0.api.upyun.com/"; // +空间名，如：http://v0.api.upyun.com/yun-temp
const baseApi = "http://localhost:8082/api/";
let uploadInput;

let app = new Vue({
  el: "#app",
  data: {
    files: [],
  },
  methods: {
    onChange: function () {
      getToken((token) => {
        let formData = new FormData();
        formData.append("file", uploadInput.files[0]);
        formData.append("policy", token.policy);
        formData.append("authorization", token.authorization);

        axios({
          method: "POST",
          url: upUrl,
          data: formData,
        })
          .then((res) => {
            res = res || {};

            if (res.status !== 200) {
              console.log("error");
              return;
            }

            let data = res.data || {};
            this.files.push(data.url);
            alert("Success");
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    onDel: function (item, index) {
      this.files.splice(index, 1);
      axios
        .request({
          url: baseApi + "token/del",
          method: "GET",
          params: {
            item: encodeURI(item),
          },
        })
        .then((res) => {
          alert("Deleted.");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    uploadInput = $("file");
  },
});

// DOM 获取元素
function $(el) {
  return document.getElementById(el);
}

// 获取 token
function getToken(fn) {
  let token = window.localStorage.getItem("token");
  token = JSON.parse(token) || {};
  let nowTime = Date.now();

  if (nowTime < token.expired && token.authorization && token.policy) {
    fn(token);
    return;
  }

  axios({
    method: "get",
    url: baseApi + "token/upload",
  }).then((res) => {
    let data = res.data || {};
    data = data.data || {};
    const authorization = data.authorization;
    const policy = data.policy;
    const expired = ((Date.now() / 1000) >>> 0) + 30 * 60;

    token = {
      authorization,
      policy,
      expired,
    };

    fn(token);
    window.localStorage.setItem("token", JSON.stringify(token));
  });
}

项目源码

https://github.com/givebest/UPyun-upload-delete-node.js

转载请注明出处： https://blog.givebest.cn/other/2018/10/27/upyun-upload-delete-node.js.html