vue 自定義分片上傳到七牛雲帶進度條

前言

場景：vue環境，UI框架爲Ant Design
Ant Design中的Upload自帶上傳功能，但是當我上傳超過1G的視頻文件時，導致文件過大而超時
於是設置customRequest屬性，通過覆蓋默認的上傳行爲，可以自定義自己的上傳實現

引入七牛SDK

• 直接使用靜態文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js
• 使用 NPM 安裝 npm install qiniu-js， import * as qiniu from "qiniu-js"
• 通過源碼編譯 ·git clone [email protected]:qiniu/js-sdk.git，進入項目根目錄執行npm install，執行 npm run build，即可在dist目錄生成qiniu.min.js

分片上傳

七牛雲官網SDK

代碼實現

<template>
	<div>
		<a-upload :action="uploadAction" :customRequest="uploadFile" :showUploadList="false">
            <a-button>
              <span v-if="obj.movieUrl">重新上傳視頻</span>
              <span v-else>上傳視頻</span>
            </a-button>
          </a-upload>
          <a-progress :percent="progress" :status="status" />
	</div>
</template>
<script>
import * as qiniu from 'qiniu-js'
export default {
  data() {
    return {
      //進度條
      progress: 0,
      status: 'active',
      //所需內容
      obj: {
        durationTime: '', //時長
        fsize: null, // 文件大小
        mediaId: '', 
        mediaKey: '',
        movieKey: '',
        movieUrl: ''
      }
    }
  },
  computed: {
    uploadAction() {
      return this.GLOBAL.fileUpload;  //上傳的地址(由於多個文件都需要所以定義在了全局)
    }
  },
  methods: {
    // 獲取時長
    getTimes(url) {
      let audioElement = new Audio(url)
      audioElement.addEventListener('loadedmetadata', _event => {
        this.obj.durationTime = parseInt(audioElement.duration)
      })
    },
   // 上傳七牛token
    uploadFile(fileList) {
      let that = this
      // 後端的接口（根據自己實際情況改）
      Api.qiniuContentToken({ mediaType: 3 }).then(res => {
        let qiniuToken = res.data.token
        that.obj.mediaKey = res.data.mediaKey
        that.obj.mediaId = res.data.mediaId
        // 設置上傳的七牛key 上傳成功需要把這個值提交到後臺
        let qiniuKey = fileList.file.name
        // 上傳文件到七牛
        let observer = {
          //上傳過程的監聽函數 result參數帶有total字段的 object，包含loaded、total、percent三個屬性)
          next(result) {
            // 實現上傳進度條 ...
            // console.log(result, '------第1步---------')
            that.progress = parseInt(result.total.percent)
            that.status = 'active'
            if (that.progress == 100) {
              that.status = 'success'
            }
          },
          //上傳失敗回調
          error(err) {
            that.$message.warning(res.message)
            // console.log(err.message, '--------第2步--------')
          },
          // 上傳完成回調
          complete(res) {
            // console.log(res, '-----------第3步---------')
            that.obj.fsize = res.fsize
            // 提交數據給後端等業務邏輯 ....
            Api.qiniuUrl({ key: res.key, showPub: false }).then(res => {
              that.obj.movieKey = res.data.key
              that.obj.movieUrl = res.data.url
              // 獲取時長
              that.getTimes(that.obj.movieUrl)
            })
          }
        }
        let putExtra = {
          //原文件名
          fname: '',
          //用來放置自定義變量
          params: {},
          //限制上傳文件類型
          mimeType: null
        }
        let config = {
          //存儲區域(z0:代表華東;z2:代表華南,不寫默認自動識別)
          // region: qiniu.region.z2,
          //分片上傳的併發請求量
          concurrentRequestLimit: 2
        }
        let observable = qiniu.upload(fileList.file, qiniuKey, qiniuToken, putExtra, config)
        // 上傳開始
        let subscription = observable.subscribe(observer)
        // 取消上傳
        // subscription.unsubscribe();
      })
    }
 }
}
</script>