首页 > 开发 > JS > 正文

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

2024-05-06 16:46:37
字体:
来源:转载
供稿:网友

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:;" rel="external nofollow" @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

总结

以上所述是小编给大家介绍的又拍云 Node.js 实现文件上传、删除,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表