断点续传时如何准确记录和恢复文件上传进度？

UX-文瑞提问于 2026-03-10 07:01:22 阅读 2

交互

我正在用 axios 做大文件分片上传，前端按 5MB 切片，后端也支持合并。但用户刷新页面后，怎么知道哪些分片已经传成功了？我试过把已上传的分片索引存到 localStorage，但有时候网络波动导致部分分片其实没传完，结果续传时跳过了这些“假成功”的分片。

有没有更可靠的方式？比如每次上传前先向服务端查询已接收的分片？如果是的话，这部分逻辑该怎么组织？下面是我当前切片上传的简化代码：

const uploadChunk = async (chunk, index) => {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('index', index);
  formData.append('fileId', fileId);

  try {
    await axios.post('/upload', formData);
    // 这里直接标记为成功，可能有问题？
    uploadedChunks.add(index);
    localStorage.setItem('uploaded', JSON.stringify([...uploadedChunks]));
  } catch (err) {
    console.error('上传失败', index);
  }
};

我来解答赞 12 收藏

反馈

1 条解答

永香酱~ Lv1

你这个问题我遇到过，localStorage记录上传状态确实不可靠。更靠谱的做法是让服务端维护上传状态，每次上传前先查询已上传的分片。

具体可以这样改：

1. 上传前先请求服务端获取已上传分片列表：

const getUploadedChunks = async (fileId) => {

  const res = await axios.get(/upload-status?fileId=${fileId});

  return new Set(res.data.uploadedChunks); // 服务端返回已上传的索引数组

}

2. 修改你的上传逻辑，先用这个接口初始化已上传分片集合：

const uploadedChunks = await getUploadedChunks(fileId);

3. 上传成功后让服务端也记录状态（需要改服务端接口）：

await axios.post('/upload', formData);

// 成功后调用确认接口

await axios.post('/upload-confirm', { fileId, index });

服务端需要实现这两个接口：
- GET /upload-status 返回指定文件已确认上传的分片索引
- POST /upload-confirm 记录某个分片已确认上传

这样即使页面刷新，重新初始化时也会从服务端获取真实的上传进度。比用localStorage靠谱多了，因为服务端才是最终权威的数据源。

注意处理并发上传的情况，服务端对upload-confirm接口要做好并发控制，避免重复记录。

2026-03-10 07:02