前端大文件分片上传与断点续传实现方案

在上传大文件（如视频、安装包、模型文件）时，直接上传容易出现以下问题：

• 文件过大 → 浏览器/服务器容易超时
• 上传过程中断 → 重新上传浪费时间
• 网络波动 → 上传失败率高

因此，大文件分片上传 + 断点续传 + 秒传校验 是目前最通用、最稳定的解决方案。

本文将通过一段完整可运行的示例代码，详细讲解如何在前端实现分片上传、断点续传、服务端校验等关键功能。

---

实现效果

• ✔ 自动切片（默认 5MB/片，可配置）
• ✔ 查询已上传分片（断点续传）
• ✔ 自动跳过已上传的片段
• ✔ 每片上传成功后重新校验
• ✔ 所有片段上传完成后自动触发合并
• ✔ 错误处理完善

---

核心代码（uploadLargeFile）

以下是核心逻辑代码，经过梳理解释后更易理解：

export async function uploadLargeFile({ file, fileId, id, chunkSize = 5 * 1024 * 1024, apiCheckChunks, apiUploadChunk, apiMergeChunks }) {
    if (!file) throw new Error("file 不能为空");
    if (!fileId) throw new Error("fileId 不能为空");
    const fileName = file.name;
    const totalChunks = Math.ceil(file.size / chunkSize);
    const chunks = [];

    // 1. 前端文件切片
    for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        chunks.push(file.(start, end));
    }

    
     res =  (fileId, id);
     uploadedList = .(res.) ? res. : [];
     (!.(uploadedList)) uploadedList = [];

    
     ( i = ; i < totalChunks; i++) {
         (uploadedList.(i)) {
            .();
            ;
        }
         formData =  ();
        formData.(, fileId);
        formData.(, id);
        formData.(, i);
        formData.(, totalChunks);
        formData.(, chunks[i]);
         (formData);

        
         res1 =  (fileId, id);
        uploadedList = res1. || [];
         (!uploadedList.(i)) {
              ();
        }
    }

    
     (uploadedList. === totalChunks) {
        .();
         (fileId, fileName, id);
    }  {
          ();
    }
     ;
}