vue-大文件分片及断点上传

最近开发过程中，有一个大文件分片上传的功能，借鉴于网上的思路，结合自己后端的逻辑，完成了这个功能，在此记录如下：

界面展示：

一、将大文件分片上传写为一个组件，可以全局注册该组件，也可以在使用的页面注册该组件，使用vuex通讯进行组件间传值

由于我有好几个页面需要使用大文件上传，所以我是在App.vue注册该组件

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
      <!-- 将分片上传组件全局注册 -->
      <big-uploader></big-uploader>
    </div>
  </a-config-provider>
</template>
<script>
...
import BigUploader from './components/bigUploader.vue';
export default {
  data () {
    return {
      ...
    };
  },
  components: { BigUploader },
  ...
};
</script>

二、文件选择上传框通过文件上传前的钩子，会有项目的业务逻辑判断，校验文件空间是否还有，判断文件是否为重复文件，提示是覆盖还是重新上传，校验都通过后就去调起大文件上传的组件

beforeUpload(file) {
      const self = this
      let size = file.size
      let params = {
        fileSize: size,
        projectCode: self.projectCode
      }
      if (size === 0) {
        this.$message.error('上传文件不能为0KB')
        return false
      }
      const fileName = file.name
      let fileType = fileName.split('.')
      fileType = fileType[fileType.length - 1].toLowerCase()//转小写
      if (this.accept.indexOf(fileType) == -1) {
        this.$message.error('请上传指定文件类型')
        return false;
      }
      if (this.uploadFlag) return false;
      this.uploadFlag = true
      return new Promise(() => {
        try {
          // 一、校验文件空间
          request(xxx).then(res => {
            if (res.code === 200) {
              // 二、计算MD5
              self.calculate(file, async function (md5) {
                const par = {
                  fileName: file.name,
                  md5Value: md5,
                  parantCode: self.parentCode,
                  projectCode: self.projectCode
                }
                // 三、文件覆盖检查
                request(xxx).then(res => {
                  console.log(res)
                  if (res.code === 200 && res.data) {
                    //同名同类型提示是否覆盖
                    self.$confirm({
                      title: false,
                      content: '该文件夹下存在同名同类型的文件，是否确认覆盖？',
                      onOk() {
                        // 覆盖
                        self.implementSetFile(file, md5)
                      },
                      onCancel() {
                        self.handelModelCancal();
                      },
                    });
                  } else {
                    // 新文件
                    self.implementSetFile(file, md5)
                  }
                  return false
                })
              })
            }
          }).catch(() => {
            self.uploadFlag = false
            return false;
          })
        }
        catch {
          self.uploadFlag = false
          return false;
        }
      })
    }, 
implementSetFile(file, md5) {
      // 设置当前上传文件
      this.setFile({
        page: this.curMenuName.name,
        bucket: 'privately',
        projectCode: this.projectCode,
        parentCode: this.parentCode,
        record: this.record,
        file: file,
        md5: md5
      })
      // 设置显示上传框
      this.setShowBigUpload(true)
      // this.$emit('ok');
      this.uploadFlag = false
      this.$emit('closeUpload')
    },
    /**
     * 计算md5，实现断点续传及秒传
     * @param file
     */
    calculate(file, callBack) {
      var fileReader = new FileReader(),
        blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
        chunkSize = 2097152,
        // read in chunks of 2MB  
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        spark = new SparkMD5();

      fileReader.onload = function (e) {
        spark.appendBinary(e.target.result); // append binary string  
        currentChunk++;

        if (currentChunk < chunks) {
          loadNext();
        }
        else {
          callBack(spark.end());
        }
      };

      function loadNext() {
        var start = currentChunk * chunkSize,
          end = start + chunkSize >= file.size ? file.size : start + chunkSize;

        fileReader.readAsBinaryString(blobSlice.call(file, start, end));
      }

      loadNext();
    }, 

三、大文件组件

data中定义当前上传下标，上传并发数，允许每个分片最多允许重传数，上传文件列队数组等值

通过mapGetters获取vuex值

...mapGetters({
      showUploadBox: `${NAMESPACE_UPLOAD}/${GET_SHOW_BIG_UPLOAD}`,
      file: `${NAMESPACE_UPLOAD}/${GET_FILE}`,
      chunkSize: `${NAMESPACE_UPLOAD}/${GET_CHUNKSIZE}`,
      threads: `${NAMESPACE_UPLOAD}/${GET_THREADS}`,
      getUplodRes: `${NAMESPACE_UPLOAD}/${GET_UPLOAD_RES}`,
    }),

通过监听file变化，触发大文件上传排队

watch: {
    file: {
      immediate: true,
      handler: function (newVal) {
        if (newVal) {
          const tempMd5 = newVal.md5
          // 判断文件是否在排队中
          if (this.upFileObj[tempMd5]) {
            this.$message.warn('当前文件已经在上传排队中，请不要重复选择')
          } else {
            newVal.fileIndex = this.uploadFiles.length
            this.upFileObj[tempMd5] = newVal
            this.uploadQueue(tempMd5)

          }

        }
      }
    }
  }

通过uploadQueue组件上传排队当前文件的分片，通过md5校验资源是否已经存在，记录资源是否存在和是否需要上传

/*
    * 上传排队
    * 计算当前文件的Md5和分片
    */
    uploadQueue(md5) {
      console.log('1.当前文件上传排队')
      const self = this;
      const tempFile = self.upFileObj[md5]
      const fileName = tempFile.file.name
      const curFileSize = tempFile.file.size
      self.handleInitRawFile(tempFile);
      // 检验资源是否存在
      request(xxx).then(res => {
        if (res.code === 200) {
          var resData = res.data
          const fileIndex = tempFile.fileIndex
          const filesArr = self.uploadFiles;
          if (resData) {
            // 资源已经存在
            console.log('3.上传文件已经存在', resData)
            filesArr[fileIndex].Already = true
            filesArr[fileIndex].resData = resData
            self.$set(filesArr, fileIndex, filesArr[fileIndex]);
          } else {
            // 需要上传
            let needChunk = false
            // 不需要分片
            if (curFileSize < self.chunkSize) {
              needChunk = false
            } else {
              needChunk = true
            }
            filesArr[fileIndex].needChunk = needChunk
            self.$set(filesArr, fileIndex, filesArr[fileIndex]);
          }
          // 判断是否正在上传中
          if (self.uploadLock) {
            console.log('有文件正在上传中...')
          } else {
            self.beforeUpload()
          }
        }
      })
    },
    /*
    ** 初始化部分自定义上传属性
    */
    handleInitRawFile(rawFile) {
      console.log('2.初始化部分自定义上传属性')
      rawFile.status = fileStatus.md5;
      rawFile.initFail = this.file
      rawFile.chunkList = [];
      rawFile.uploadProgress = 0;
      rawFile.fakeUploadProgress = 0; // 假进度条，处理恢复上传后，进度条后移的问题
      rawFile.hashProgress = 0;
      this.uploadFiles.push(rawFile);
    },

文件正式上传前，判断资源是否存在直接秒传，是否需要上传，上传的话是否需要进行分片，秒传和不需要分片都是简单的业务逻辑，下面展示一下主要的分片代码

需要分片，组件分片上传数组

/*
    ** 开始组建上传数组
    */
    async handleUpload() {
      console.log('6.开始组建上传数组')
      if (!this.uploadLock) return;
      const filesArr = this.uploadFiles;
      const fileUpIdx = this.fileUpIdx
      const fileChunkList = this.createFileChunk(filesArr[fileUpIdx].file);
      if (filesArr[fileUpIdx].status !== 'resume') {
        this.status = Status.hash;
        // hash校验，是否为秒传
        filesArr[fileUpIdx].hash = await this.calculateHash(fileChunkList);
        // 若清空或者状态为等待，则跳出循环
        if (this.status === Status.wait) {
          console.log('若清空或者状态为等待，则跳出循环');
          return
        }
      }

      this.status = Status.uploading;
      filesArr[fileUpIdx].status = fileStatus.uploading;
      filesArr[fileUpIdx].fileHash = filesArr[fileUpIdx].hash; // 文件的hash，合并时使用
      filesArr[fileUpIdx].chunkList = fileChunkList.map(({ file }, index) => ({
        fileHash: filesArr[fileUpIdx].hash,
        fileName: filesArr[fileUpIdx].file.name,
        index,
        hash: filesArr[fileUpIdx].hash + '-' + index,
        chunk: file,
        size: file.size,
        uploaded: false, // 标识：是否已完成上传
        progress: 0,
        status: 'wait' // 上传状态，用作进度状态显示
      }));
      this.$set(filesArr, fileUpIdx, filesArr[fileUpIdx]);
      ...
    },

分片-初始化任务的时候，将分片数组及文件md5传给后端，后端返回该文件上传的任务id,及没有上传的片段数组及小片段id，已经上传的片段，实现秒传效果，这里就是断点续传的主要逻辑思路

initJob() {
      console.log('7.分片-初始化任务')
      const filesArr = this.uploadFiles;
      const fileUpIdx = this.fileUpIdx
      const uploadFileMd5 = filesArr[fileUpIdx].md5
      let detailList = []
      filesArr[fileUpIdx].chunkList.forEach((item, idx) => {
        detailList.push({
          extInfo: '',
          // file: item.chunk,
          num: idx
        })
      })
      const params = {
        md5HashValue: uploadFileMd5,
        detailList: detailList
      }
      request(xxx).then(res => {
        console.log('分片-初始化任务', res)
        if (res.code === 200) {
          const resData = res.data
          if (resData.jobStatus === 1) {
            console.log('上传文件已经存在', resData)
          } else {
            let sliceList = []
            this.jobCode = resData.jobCode
            resData.sliceList.forEach(item => {
              const tt = {
                ...item,
                ...filesArr[fileUpIdx].chunkList[item.num]
              }
              sliceList.push(tt)
            })
            // this.sliceList = sliceList
            filesArr[fileUpIdx].chunkList = sliceList
            this.$set(filesArr, fileUpIdx, filesArr[fileUpIdx]);
            //没有上传的分片
            let noUpSlice = [], yesUpSlice = [];
            sliceList.filter((item, idx) => {
              item.num = idx
              if (item.uploadStatus === 0) {
                noUpSlice.push({ ...item });
              } else {
                yesUpSlice.push({ ...item });
              }
            })
            // const noUpSlice = sliceList.filter(({ uploadStatus }) => uploadStatus === 0)
            console.log('没有上传的分片', noUpSlice)
            if (noUpSlice.length === 0) {
              this.mergeRequest();
            } else {
              if (yesUpSlice.length > 0) {
                yesUpSlice.forEach(item => {
                  this.createProgresshandler(100, item.num)
                })
              }
              this.uploadChunks(noUpSlice, sliceList);
            }
          }
        }
      })
    },

将切片传输给服务端,进行并发上传处理，所有的分片上传完成，向服务端进行合并请求

async uploadChunks(data, allData) {
      console.log('8.将切片传输给服务端')
      return new Promise(async (resolve, reject) => {
        const requestDataList = data.map(({ sliceCode, num, chunk }) => {
          const formData = new FormData();
          formData.append('sliceCode', sliceCode);
          formData.append('file', chunk);
          return { formData, num };
        })
        try {
          const ret = this.sendRequest(requestDataList, data, allData);
        } catch (error) {
          // 上传有被reject的
          this.$message.error('亲 上传失败了,考虑重试下呦' + error);
          return;
        }
        // 合并切片
        const isUpload = data.some((item) => item.uploadStatus === 0);
        if (!isUpload) {
          // 执行合并
          try {
            await this.mergeRequest();
            resolve();
          } catch (error) {
            reject();
          }
        }
      });
    },
sendRequest(forms, chunkData, allData) {
      console.log('9.分片-并发上传处理')
      var finished = 0;
      const total = forms.length;
      const that = this;
      const retryArr = []; // 数组存储每个文件hash请求的重试次数，做累加 比如[1,0,2],就是第0个文件切片报错1次，第2个报错2次
      // const md5Hash = allData[0].fileHash
      const filesArr = this.uploadFiles;
      const fileUpIdx = this.fileUpIdx
      const md5Hash = filesArr[fileUpIdx].md5

      return new Promise((resolve, reject) => {
        const handler = () => {
          if (forms.length) {
            // 出栈
            const formInfo = forms.shift();
            const formData = formInfo.formData;
            const index = formInfo.num;
            /*
            ***  开始分片上传
            */
            // console.log('当前分片上传', allData[index])
            if (allData[index]) {
              request(xxx)
                .then(res => {
                  // 更改状态
                  allData[index].uploaded = true;
                  allData[index].uploadStatus = 1;
                  allData[index].status = 'success';
                  finished++;
                  if (finished === chunkData.length) {
                    // 执行合并
                    this.mergeRequest();
                  }
                  handler();
                }).catch((e) => {
                  // 若状态为暂停或等待，则禁止重试
                  if ([Status.pause, Status.wait].includes(this.status)) return;
                  console.warn('出现错误', e);
                  console.log('当前分片上传报错', retryArr);
                  if (typeof retryArr[index] !== 'number') {
                    retryArr[index] = 0;
                  }
                  // 更新状态
                  allData[index].status = 'warning';
                  // 累加错误次数
                  retryArr[index]++;
                  // 重试3次
                  if (retryArr[index] >= this.chunkRetry) {
                    console.warn(' 重试失败--- > handler -> retryArr', retryArr, allData[index].hash);
                    return reject('重试失败', retryArr);
                  }
                  // console.log('handler -> retryArr[finished]', `${allData[index].hash}--进行第 ${retryArr[index]} '次重试'`);
                  // console.log(retryArr);

                  this.tempThreads++; // 释放当前占用的通道
                  // 将失败的重新加入队列
                  forms.push(formInfo);
                  handler();
                })
            }
          }
          if (finished >= total) {
            resolve('done');
          }
        };
        // 控制并发
        for (let i = 0; i < this.tempThreads; i++) {
          handler();
        }
      });
    },

通知服务端合并切片,设置总的文件进度，并设置上传结果，回传给页面展示新增文件，进行下一步业务操作

在此大文件上传的整个思路就完成了。

参考文章：http://blog.ncmem.com/wordpress/2023/11/15/vue-%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e5%8f%8a%e6%96%ad%e7%82%b9%e4%b8%8a%e4%bc%a0/
欢迎入群一起讨论