又拍云 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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
如何用threejs实现实时多边形折射
May 07 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函数代码
2010/04/22 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php简单实现MVC
2015/02/05 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript知识点整理
2015/12/09 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
基于Python的文件类型和字符串详解
2017/12/21 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
《槐乡五月》教学反思
2014/04/25 职场文书
数学系毕业生求职信
2014/05/29 职场文书
节能环保标语
2014/06/12 职场文书
员工团队活动方案
2014/08/28 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
毕业生对母校寄语
2015/02/26 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android