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>