又拍云 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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
js实现简易聊天对话框
Aug 17 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 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简单分页类实现方法
2015/02/26 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
python正则表达式实例代码
2020/03/03 Python
Python 实现微信自动回复的方法
2020/09/11 Python
美国性感女装网站:bebe
2017/03/04 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
元旦晚会邀请函
2014/02/01 职场文书
国窖1573广告词
2014/03/21 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
服务承诺书格式
2014/05/21 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年小学工作总结
2014/11/26 职场文书
项目战略合作意向书
2015/05/08 职场文书
个人求职意向书
2015/05/11 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python