前端大文件分片上传断点续传

 

分片上传

分片上传是将大文件分成多个小文件进行上传，每个小文件的大小通常为1MB到10MB。上传时，将每个小文件分别上传到服务器，服务器再将这些小文件合并成一个完整的大文件。这种方法可以提高上传速度，减少上传失败的可能性。

断点续传

断点续传是指在上传过程中，如果上传失败或者中断了，可以从上次上传的位置继续上传。这种方法可以避免上传失败后需要重新上传整个文件的问题，节省时间和带宽。

<script>
      const inp = document.querySelector('input[type="file"]')
      inp.onchange = async (e) => {
        const file = inp.files[0]
        if (!file) {
          return
        }
        const chunks = createChunks(file, 10 * 1024 * 1024) //10M
        const hash = await fileHash(chunks)
        upload(chunks, hash)
      }

      // 计算文件哈希值 使用第三方库SparkMD5
      function fileHash(chunks) {
        return new Promise((resolve, reject) => {
          const spark = new SparkMD5()
          function _read(i) {
            if (i >= chunks.length) {
              resolve(spark.end())
              return // 读取完成
            }
            const blob = chunks[i]
            const reader = new FileReader()
            reader.onload = (e) => {
              const bytes = e.target.result // 读取到的字节数
              spark.append(bytes)
              _read(i + 1)
            }
            reader.readAsArrayBuffer(blob)
          }
          _read(0)
        })
      }

      // 将文件根据指定长度切片
      function createChunks(file, chunkSize) {
        const result = []
        for (let i = 0; i < file.size; i += chunkSize) {
          result.push(file.slice(i, i + chunkSize))
        }
        return result
      }

      // 上传
      function upload(chunks, hash) {
        function uploadFile(index) {
          const xhr = new XMLHttpRequest()
          xhr.open('POST', '/upload', true)
          xhr.setRequestHeader('Content-Type', 'application/octet-stream')
          xhr.setRequestHeader('X-File-Hash', hash)
          xhr.setRequestHeader('X-File-Index', index)
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              // 文件上传完成
              // 拿到回调看服务端是第几个分片
              // 判断是否需要继续传 剩余分片
              // 需要递归调用uploadFile()
              // 完成调用合成接口通知后端merge(); 上传完成 合成文件
            }
          }
          xhr.send(chunks[index])
        }
        uploadFile(0)
      }
    </script>

参考文章：http://blog.ncmem.com/wordpress/2023/09/21/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/

欢迎入群一起讨论