Vue2.0利用vue-resource上传文件到七牛

lcodecorex 发布于2019-08-20 14:34 / 1697人阅读

摘要：年底，公司项目番茄表单的前端部分，开始了从传统的到的彻底重构。上传流程图不重要看文字事件触发后，先去如果是图片，可以同时通过以及将图片预览在页面上后台请求七牛的上传，将拿到的和以及通过传递过来的一起到中。

关于上传，总是有很多可以说道的。
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的使用，势必会回到兼容性这个老大难上来，慎重的选择性使用吧

本文首发于我的博客

GPU云服务器云服务器到七牛 vue2.0 cdn 远程服务器怎么保存到七牛云七牛上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81756.html

关于数据迁移，你应该知道的那些方法

摘要：数据迁移过程中的速率问题。关闭源站数据迁移典型案例剖析七牛客户陌陌的数据量非常大，如果采用常用的传输办法，整个迁移过程要耗时半年，并且会严重影响线上的业务。为此，七牛为陌陌制定了个性化的数据迁移方案。 showImg(http://sharlyne-lee.qiniudn.com/m1.png); 无论是计划拥抱云服务还是打算从正在使用的云服务切换到另外一家，这其中数据的迁移是很关键...

DDreach 2019-06-28 10:49 评论0 收藏0
文件上传进度提示

摘要：需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。前提请求是异步的。因为要实时获取到上传的进度...

MageekChiu 2019-08-20 15:17 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

Salamander 2019-08-22 16:43 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

banana_pi 2019-08-29 15:11 评论0 收藏0