又拍云 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");// MD5function MD5(value) { ?return crypto ???.createHash("md5") ???.update(value) ???.digest("hex");}// Base64function base64(value) { ?return Buffer.from(value).toString("base64");}// hmacsha1function 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/'// Uploadapp.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 ???} ?});});// Deleteapp.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/corsapp.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

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

原文地址：https://www.cnblogs.com/givebest/p/9860638.html