断点续传上传大文件时如何正确分片并记录进度？

瑞红 Dev 提问于 2026-03-22 09:50:19 阅读 11

交互

我正在做一个支持断点续传的文件上传功能，用的是切片上传的方式。但每次刷新页面后不知道从哪一片继续传，本地存了已上传的chunkIndex，可服务端返回的已接收分片列表对不上，导致重复传或者漏传。

下面是我切片和上传的逻辑，是不是哪里处理得不对？

const chunkSize = 2 * 1024 * 1024; // 2MB
const chunks = [];
for (let i = 0; i < file.size; i += chunkSize) {
  chunks.push(file.slice(i, i + chunkSize));
}
// 上传每个分片，上传成功后把 index 存入 localStorage
chunks.forEach((chunk, index) => {
  uploadChunk(chunk, index, file.name);
});

我来解答赞 9 收藏

反馈

1 条解答

Newb.永臣 Lv1

改成这样
每次上传分片前先请求服务端获取已上传的分片列表，然后只上传不在列表中的分片

async function uploadFileWithResume(file) {

  const chunkSize = 2 * 1024 * 1024; // 2MB

  const chunks = [];

  for (let i = 0; i < file.size; i += chunkSize) {

    chunks.push(file.slice(i, i + chunkSize));

  }

  const uploadedChunks = await getUploadedChunks(file.name); // 假设这个函数请求服务端获取已上传分片列表

  chunks.forEach((chunk, index) => {

    if (!uploadedChunks.includes(index)) {

      uploadChunk(chunk, index, file.name);

    }

  });

}

2026-03-22 10:00