vue 配合 iview upload / el-upload 上傳七牛

vue項目配置iview的upload插件上傳文件到七牛服務器

一、ivew upload組件

<Upload
      type="drag"   // 支持拖拽
      multiple      // 支持多文件上傳 
      :max-size="10240000"  // 設置上傳最大量
      :action="'https://upload.qiniup.com'" // 七牛服務器地址，詳見下面圖片
      :show-upload-list="false" // 是否顯示上傳列表
      :data="uploadParams"      // 上傳參數配置
      :default-file-list="[]"   // 顯示默認列表，以前上傳的文件列表
      :on-success="handleSuccess"   // 上傳成功回調函數
      :before-upload="beforeUpload" // 上傳以前回調函數，能夠在這裏設置上傳的參數
      :on-remove="removeFile"       // 刪除文件回調函數
      :on-preview="previewFile"     // 點擊上傳列表回調函數
      :on-progress="progressFile"   // 上傳進度回調函數
      :on-change="changeFile"       // 選擇文件改變回調函數
      style="width: 100%;"
      >
      <i class="iconfont icon-add1 icon"></i>{{buttonText ? buttonText : '點擊或者拖拽到此上傳'}}
    </Upload>

其實上傳七牛有兩種方法，這裏直接使用表單action提交自動觸發上傳七牛，也能夠導入七牛js經過七牛實例傳參、掉接口上傳。

二、獲取token，上傳必備，經過後臺接口返回。
三、設置其餘參數，經過表單裏面的:data屬性傳遞給七牛

data () {
    return {
        uploadParams: {}
    }
}
methods: {
    beforeUpload (request) {
      console.log(request, 'beforeUpload')
      // **注意這裏的參數必須經過屬性賦值，若是直接修改整個uploadParams是無效的。**
      // 上傳以前設置上傳參數,
      this.uploadParams.token = this.$store.state.upload_token
      // 七牛response hash key的值自定義，後面若是須要瀏覽或者下載都須要這個地址，若是key不定義，那麼七牛生成的key === hash的值
      this.uploadParams.key = request.name
      // 整個上傳確定是一個組件，因此須要將值反饋給父界面
      this.$emit('completeFun', [request])
    },
    handleSuccess (request, file, list) {
      console.log(file, list, '上傳成功')
      // 這裏就能拿到七牛返回的response信息（hash, key)而後拼接服務器地址，就能夠訪問了
      this.imageUrl = this.$store.getters.upload_url + request.key
      console.log(request, this.$store.getters.upload_url + file.name, '獲取圖片地址')
      this.$emit('successFun', [file, list, this.imageUrl])
    },

}

遇到的問題

Q、沒有設置key參數，七牛返回的hash 和 key 相同，若是想要下載或者訪問圖片，只能經過生成的key來訪問，沒有文件名稱，沒法訪問。

W、在beforeupload鉤子函數中設置key參數爲文件名稱

Q、上傳多個文件七牛之後須要調接口先保存到服務器，而後在從服務器獲取顯示列表，都是在success鉤子函數中進行的，這樣會出現，上傳文件丟失等問題

W、由於接口異步獲取、上傳多個文件會執行屢次success等緣由形成的。原來想的是能夠在beforeupload鉤子函數中調取修改接口上傳圖片，而後在success中調取查詢接口，可是這裏不能獲取到hash、key的值，後臺須要這些參數，最後是在success中作了計數，若是上傳五個文件，初始化index = 0，success鉤子函數中index++，若是index === fileList.length這時候調取後臺編輯接口，而後同步調取查詢接口。