Vue2.0利用vue-resource上传文件到七牛的实例代码
发布时间:2020-12-17 02:51:31 所属栏目:百科 来源:网络整理
导读:本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助 关于上传,总是有很多可以说道的。 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,
本文介绍了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传递给七牛,七牛在处理后将返回真正的文件地址 获取tokenexports.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 |