Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼

const qiniu = require('qiniu')
const crypto = require('crypto')
const Config = require('qiniu-config')

exports.token = function*() {
 //構(gòu)建一個(gè)保存文件名
 //這里沒有處理文件后綴,需要自己傳遞過來,然后在這里處理加在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
 }
}

//假設(shè)api 地址是 /api/token 

<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], //當(dāng)前上傳標(biāo)識(shí),以便于在同一個(gè)監(jiān)聽函數(shù)中區(qū)分不同的上傳域
 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 //在預(yù)覽區(qū)域插入圖片

 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)
 //讓當(dāng)前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 //上傳進(jìn)度
 }
 },
 methods : {
 uploadProgress (progress, flag) {
 //這里可以通過回調(diào)的flag對(duì)不同上傳域做處理
 this.progress = progress < 100 ? progress : 0;
 },
 uploadComplete(status, result, flag) {
 if (status == 200) { //
 this.thumbnail = `domain.com/${result.key}` //七牛域名 + 返回的key 組成文件url
 } else {
 //失敗處理
 }
 },
 }
 }
</script>