视频大文件分片上传_vue 大文件 切片 后台上传

前端

整体思路是利用Blob.prototype.slice将文件切片，然后循环调用上传接口将切片上传。这样将由原来的一个大文件上传变为多个小文件同时上传，节省了上传时间
步骤一：通过FileReader读取文件二进制内容，然后调用js-md5插件给文件设置唯一编码

const readFileMD5 = () => {
    // 读取视频文件的md5
    console.log("获取文件的MD5值")
    let fileRederInstance = new FileReader()
    fileRederInstance.readAsBinaryString(file)
    fileRederInstance.addEventListener('load', e => {
      let fileBolb = e.target.result
      
      fileMD5 = md5(fileBolb)
      console.log("文件未被上传，将分片上传")
      readChunkMD5()
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

步骤二：获取大文件的切片信息，通过调用file.slice将文件切片；并对每个切片进行md5编码

const getChunkInfo = (file, currentChunk, chunkSize) => {
    let start = currentChunk * chunkSize
    let end = Math.min(file.size, start + chunkSize)
    let chunk = file.slice(start, end)
    return { start, end, chunk }
  }
1
2
3
4
5
6

const readChunkMD5 =  () => {
    // 针对单个文件进行chunk上传
    for (let i = 0; i < chunkCount; i++) {
      const { chunk } = getChunkInfo(file, i, chunkSize)
      let fileRederInstance = new FileReader()
      fileRederInstance.readAsBinaryString(chunk)
      fileRederInstance.addEventListener('load', e => {
        let fileBolb = e.target.result
        let chunkMD5 = ''
        chunkMD5 = md5(fileBolb)
        uploadChunk({ chunk, currentChunk: i, chunkCount, chunkMD5 })
      })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

步骤三： 调用上传接口，在切片全部上传完成后，调用合并接口获取返回值

const uploadChunk = (chunkInfo) => {
    // progressFun()
    let fetchForm = new FormData()
    fetchForm.append('sliceIndex', chunkInfo.currentChunk)
    fetchForm.append('file', chunkInfo.chunk)  //文件
    fetchForm.append('fileMd5', fileMD5)  //文件Md5
    fetchForm.append('hashCode', fileMD5)  //文件Md5
    fetchForm.append('sliceHashCode', chunkInfo.chunkMD5)  //切片Md5
    fetchForm.append('fileName', file.name)  //文件名
    uploadVideoChunkAxios(fetchForm).then(res => {
      console.log("分片上传返回信息：")
      console.log(res)
      if (res.code == 200) {
        // success && success(res)
        if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
          console.log("分片上传成功,执行合并请求")
          mergeFileAxios({ "hashCode": fileMD5, "fileName": file.name }).then(res => {
            if (res.code == 200) {
               success && success(res)
              console.log("文件合并成功")
             }
             else { console.log(res.msg) }
           }).catch((e) => {
             console.log("文件合并错误")
             console.log(e)
           })
        } else {
          // 当总数大于等于分片个数的时候
          if (chunkInfo.currentChunk >= chunkInfo.chunkCount - 1) {
            console.log("文件开始------合并成功")
          }
        }
      }
      else {
        console.log(res.msg)
      }
    }).catch((e) => {
      error && error(e)
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40