pkg文件上传服务器,又拍云 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 实现签名认证

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

UPYun Upload & Delete

Upload

• {{item}} Del

引入 Vue.js、Axios

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))

});

}

项目源码