Vue2.0利用vue-resource上传文件到七牛的实例代码

本篇文章主要介绍了Vue2.0利用vue-resource上传文件到七牛的实例代码，具有一定的参考价值，有兴趣的可以了解一下

本文介绍了Vue2.0利用vue-resource上传文件到七牛，分享给大家，希望对大家有帮助

关于上传，总是有很多可以说道的。

16年底，公司项目番茄表单的前端部分，开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分，无论是之前的传统版本，还是Vue新版本，都是在使用着FileAPI这款优秀的开源库，只是进行了简单的directive化。为什么呢？因为兼容性。没办法，公司项目不等同于个人项目，必须要考虑大多数浏览器。否则，上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾，幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

上传流程

图不重要看文字

input[type="file"] change事件触发后，先去（如果是图片，可以同时通过FileReader以及readAsDataURL将图片预览在页面上）后台请求七牛的上传token，将拿到的token和key以及通过change传递过来的files一起append到formData中。然后将formData通过post传递给七牛，七牛在处理后将返回真正的文件地址

获取token

 const qiniu = require('qiniu') const crypto = require('crypto') const Config = require('qiniu-config') exports.token = function*() { //构建一个保存文件名 //这里没有处理文件后缀,需要自己传递过来,然后在这里处理加在key上,非必须 const key = crypto.createHash('md5').update(((new Date()) * 1 + Math.floor(Math.random() * 10).toString())).digest('hex') //Config 七牛的秘钥等配置 const [ACCESS_KEY, SECRET_KEY, BUCKET] = [Config.accessKey, Config.secretKey, Config.bucket] qiniu.conf.ACCESS_KEY = ACCESS_KEY qiniu.conf.SECRET_KEY = SECRET_KEY const upToken = new qiniu.rs.PutPolicy(BUCKET + ":" + key) try { const token = upToken.token() return this.body = { key: key, token: token } } catch (e) { // throw error } } //假设api 地址是 /api/token

上传组件 upload.vue

父组件调用

小结

相比于FILEApi 或者其他上传组件，这种方法代码量最小。但是缺点也是显而易见的，大量html5 API的使用，势必会回到兼容性这个老大难上来，慎重的选择性使用吧‘

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。

以上就是Vue2.0利用vue-resource上传文件到七牛的实例代码的详细内容，更多请关注0133技术站其它相关文章！