在上传大文件（如视频、安装包、模型文件）时，直接上传容易出现以下问题：
- 文件过大 → 浏览器/服务器容易超时
- 上传过程中断 → 重新上传浪费时间
- 网络波动 → 上传失败率高
因此，大文件分片上传 + 断点续传 + 秒传校验 是目前最通用、最稳定的解决方案。
本文将通过一段完整可运行的示例代码，详细讲解如何在前端实现分片上传、断点续传、服务端校验等关键功能。
实现效果
- ✔ 自动切片（默认 5MB/片，可配置）
- ✔ 查询已上传分片（断点续传）
- ✔ 自动跳过已上传的片段
- ✔ 每片上传成功后重新校验
- ✔ 所有片段上传完成后自动触发合并
- ✔ 错误处理完善
核心代码
以下代码是本文的核心逻辑，经过梳理解释后更易理解：
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.slice(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);
} {
();
}
;
}
