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

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

exports.token = function*() {
  //構(gòu)建一個(gè)保存文件名
  //這里沒(méi)有處理文件后綴,需要自己傳遞過(guò)來(lái),然后在這里處理加在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 : { //允許的上傳類(lèi)型
        type : String,
        default : 'image/jpeg,image/jpg,image/png,image/gif'
      },
      flag : [String, Number], //當(dāng)前上傳標(biāo)識(shí),以便于在同一個(gè)監(jiān)聽(tīng)函數(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, 文件大小,類(lèi)型等過(guò)濾
          //如果是圖片文件
          // 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" :></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) {
        //這里可以通過(guò)回調(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>