180
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
<template>
<label class="mo-upload">
<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 class="upload-preview">
<img :src="thumbnail" v-if="thumbnail"/>
</figure>
<mo-upload flag="'thumbnail'" @complete="uploadComplete" @progress="uploadProgress">
<a>選擇圖片文件<i class="progress" :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>
小結
相比於FILEApi 或者其他上傳組件，這種方法代碼量最小。但是缺點也是顯而易見的，大量html5 API的使用，勢必會回到兼容性這個老大難上來，慎重的選擇性使用吧
最後更新：2017-11-03 10:34:21