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


Posted in Javascript onOctober 28, 2018

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:;" 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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
javascript中函数的写法实例代码详解
Oct 28 #Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 #Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 #Javascript
vue中使用protobuf的过程记录
Oct 26 #Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 #Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 #Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 #Javascript
You might like
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
vuex入门最详细整理
2020/03/04 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python中的迭代和可迭代对象代码示例
2017/12/27 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
反邪教标语
2014/06/23 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
会计岗位职责
2015/02/03 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
python析构函数用法及注意事项
2021/06/22 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers