分片并发上传实现

原创已于 2025-10-22 11:26:47 修改 · 737 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#状态模式

于 2025-10-09 17:55:46 首次发布

先上流程图

文件上传步骤

1.文件分片处理：将文件按 5MB 大小切分为多个 Blob 分片，并发送文件信息至后端。

2.获取预签名 URL：后端为每个分片生成预签名上传 URL，并返回给前端，用于前端上传。

3.并发上传分片：前端控制最多同时 3 个上传任务，逐个发起 PUT 请求上传分片。上传成功则继续下一个分片，上传失败则自动重试，自动重试最多 3 次。

4.所有分片上传成功后，调用后端合并接口，完成文件上传。

一、文件切片处理

使用 File.slice() 将文件切分为多个 Blob。

文件切片好处

1. 拆分为小片，避免因网络波动导致整体上传的失败，支持断点续传。

2. 并发上传多个分片，可以缩短整体上传时间。

3. 若上传失败仅需重传失败的分片，无需重复上传整个文件。

4. 可控制单次请求大小，避免超时或内存溢出。

为什么使用 `Blob` 而非 `FileBuffer`

用 Blob 可以有效降低内存占用

Blob 是惰性加载的

Blob 对象本身并不立即将文件内容加载到内存中。它更像是一个指向文件某部分的“引用”。只有当真正读取 Blob 内容时（例如通过 FileReader 或 Response API），数据才会被加载。

ArrayBuffer/Buffer 是内存驻留的

创建 ArrayBuffer 意味着立即将切片的数据复制到内存中，占用实际的内存空间。对于大文件，这会导致内存占用急剧上升，可能引发性能问题或内存溢出。

具体代码：

export const getFileChunk = async (file, chunkSize = 8 * 1024 * 1024) => {
  const chunks = await getFileChunkAsBlob(file, chunkSize)
  return chunks
}

// 只分片不读取数据，返回 Blob
const getFileChunkAsBlob = (file, chunkSize) => {
  return new Promise(resolve => {
    const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
    const chunks = Math.ceil(file.size / chunkSize)
    const chunksMap = {}

    // 循环生成 Blob 分片
    for (let i = 0; i < chunks; i++) {
      const start = i * chunkSize
      const end = Math.min(start + chunkSize, file.size)
      chunksMap[i + 1] = blobSlice.call(file, start, end) // 返回 Blob
    }

    resolve(chunksMap)
  })
}