前端大文件分片上传与断点续传实战方案
在处理视频、安装包或模型文件等大资源时，直接全量上传往往面临浏览器超时、网络波动导致中断以及重传耗时等问题。采用分片上传 + 断点续传 + 服务端校验是目前最稳健的解决方案。
核心实现逻辑
下面是一个完整的前端工具函数 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.slice(start, end));
}
// 2. 查询已上传分片（断点续传关键）
let res = await apiCheckChunks(fileId, id);
let uploadedList = Array.(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);
} {
();
}
;
}
