又拍云 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提交表单ajax查询实例代码
Oct 07 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
终止劳动合同协议书
2014/10/05 职场文书
个人事迹材料范文
2014/12/29 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL