关于上传，总是有很多可以说道的。
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
<template> <label> <input type="file" :accept="accepts" @change="upload"> <slot></slot> </label> </template> <style lang="scss"> .mo-upload { display: inline-block; position: relative; margin-bottom: 0; input[type="file"] { display: none; } .mo-upload--label { display: inline-block; position: relative; } } </style> <script> export default { name : 'MoUpload', props : { accepts : { //允许的上传类型 type : String, default : 'image/jpeg,image/jpg,image/png,image/gif' }, flag : [String, Number], //当前上传标识,以便于在同一个监听函数中区分不同的上传域 maxSize : { type : Number, default : 0 //上传大小限制 }, }, methods: { upload (event) { let file = event.target.files[0] const self = this const flag = this.flag if (file) { if (this.maxSize) { //todo filter file } //filter file, 文件大小,类型等过滤 //如果是图片文件 // const reader = new FileReader() // const imageUrl = reader.readAsDataURL(file) // img.src = imageUrl //在预览区域插入图片 const formData = new FormData() formData.append('file', file) //获取token this.$http.get(`/api/token/`) .then(response => { const result = response.body formData.append('token', result.token) formData.append('key', result.key) //提交给七牛处理 self.$http.post('https://up.qbox.me/', formData, { progress(event) { //传递给父组件的progress方法 self.$emit('progress', parseFloat(event.loaded / event.total * 100), flag) } }) .then(response => { const result = response.body if (result.hash && result.key) { //传递给父组件的complete方法 self.$emit('complete', 200 , result, flag) //让当前target可以重新选择 event.target.value = null } else { self.$emit('complete', 500, result, flag) } }, error => self.$emit('complete', 500, error.message), flag) }) } } } } </script>
父组件调用
<template> <section> ... <figure> <img :src="thumbnail" v-if="thumbnail"/> </figure> <mo-upload flag="'thumbnail'" @complete="uploadComplete" @progress="uploadProgress"> <a>选择图片文件<i :style="{width:progress + '%'}"></i></a> </mo-upload> ... </section> </template> <script> import MoUpload from 'upload' export default { components : { MoUpload, }, data () { return { thumbnail : null, progress : 0 //上传进度 } }, methods : { uploadProgress (progress, flag) { //这里可以通过回调的flag对不同上传域做处理 this.progress = progress < 100 ? progress : 0; }, uploadComplete(status, result, flag) { if (status == 200) { // this.thumbnail = `domain.com/${result.key}` //七牛域名 + 返回的key 组成文件url } else { //失败处理 } }, } } </script>
小结