又拍云 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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
AngularJS转换响应内容
Jan 27 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php解析json数据实例
2014/08/19 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
Javascript中的String对象详谈
2014/03/03 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python多线程获取返回值代码实例
2020/02/17 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
创意广告词
2014/03/17 职场文书
药品营销策划方案
2014/06/15 职场文书
欠款证明
2015/06/24 职场文书
行政处罚决定书
2015/06/24 职场文书
学生会主席任命书
2015/09/21 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
Python中的嵌套循环详情
2022/03/23 Python