Vue+element-ui实现大文件分片上传，可控制同时上传的并发数

2020.10.23更新：这篇文章中的方法有一些缺陷。更好的解决方案请看在Vue项目中创建自己的大文件分片上传组件（基于element-upload改造）

用过element-ui中Upload上传组件的都知道，他不支持文件分片上传，如果有文件分片的上传的需求时，只能去安装其他的上传组件，如vue-simple-uploader，webuploader等，我们公司的需求涉及到获取视频时长，上传文件名等等，如果换一个上传组件就要写两套获取文件信息的代码，不是很方便，查阅element-ui中Upload文档之后发现它有一个属性
设置这个属性之后，可以覆盖组件自带的上传行为，可以实现自己的自定义上传，具体实现如下：

//template
<el-upload
  :http-request="chunkedUpload"
  :ref="chunkedUpload"
  :action="uploadUrl"
  :data="uploadData"
  :on-error="onError"
  :before-remove="beforeRemove"
  name="file">

//js部分
import chunkedUpload from './chunkedUpload'
export default {
   
  data() {
   
    return {
   
      uploadData: {
   
        //这里面放额外携带的参数
      },
      //文件上传的路径
      uploadUrl: process.env.BASE_API + '/oss/oss/uploadChunkFile', //文件上传的路径
      chunkedUpload: chunkedUpload // 分片上传自定义方法，在头部引入了
    }
  },
  methods: {
   
    onError(err, file, fileList) {
   
      this.$store.getters.chunkedUploadXhr.forEach(item => {
   
        item.abort()
      })
      this.$alert('文件上传失败，请重试', '错误', {
   
        confirmButtonText: '确定'
      })
    },
    beforeRemove(file) {
   
      // 如果正在分片上传，则取消分片上传
      if (file.percentage !== 100) {
   
        this.$store.getters.chunkedUploadXhr.forEach(item => {
   
          item.abort()
        })
      }
    }
  }
}

//chunkedUpload.js
import SparkMD5 from 'spark-md5'
import axios from 'axios'
import store from '@/store'
// 如果上传错误，获取报错信息
function getError(action, option, xhr) {
   
  let msg
  if (xhr.response) {
   
    m