基於element ui 實現七牛雲自定義key上傳文件，並監聽更新上傳進度

借助上傳Upload 上傳組件的 http-request 覆蓋默認的上傳行為，可以自定義上傳的實現

　　　　　　<el-upload
            multiple
            ref="sliderUpload"
            :data="uploadData"
            :action="uploadData.url"
            list-type="picture-card"
            accept="image/png,image/jpeg,image/jpg"
            :auto-upload="true"
            :limit="numberLimit.slider"
            :file-list="sliderList"
            :http-request="sliderRequest"
            :before-upload="beforeUpload"
            :on-remove="sliderRemove"
            :on-preview="picturePreview"
            :on-error="uploadError"
            :on-exceed="uploadLimit">
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">限上傳9張輪播圖</div>
          </el-upload>

　　

sliderRequest(upload) {
      // 文件上傳自行處理上傳
      // 創建FormData對象 添加相關上傳參數
      const formData = new FormData()
      // 文件對象
      formData.append('file', upload.file)
      // key 文件名處理 images/時間戳_隨機字符串.文件后綴
      formData.append('key', `images/${new Date().getTime()}_${randomString()}.${upload.file.name.substring(upload.file.name.lastIndexOf('.') + 1)}`)
      // token
      formData.append('token', this.uploadData.token)

      // 上傳文件
      // onUploadProgress 查看axios文檔 https://github.com/axios/axios
      axios.post(this.uploadData.url, formData, {
        onUploadProgress: (event) => {
          // 監聽上傳進度
          event.percent = event.loaded / event.total * 100
          upload.onProgress(event)
        }
      }).then((response) => {
        const res = response.data
        if (res.code === 200) {
          // 調用組件上傳成功方法
          upload.onSuccess()
          // 輪播圖上傳成功 這里做相關邏輯this.$message.success('上傳成功')
        }
      }).catch((err) => {
        // 調用組件上傳失敗方法
        upload.onError()
        this.$message.error('上傳失敗,' + err)
      })
    }