前端大文件上传实战:分片、断点续传与优化策略
现状分析
前端文件上传看似简单,实则坑不少。很多项目直接使用原生的 <input type="file">,一旦遇到大文件,浏览器很容易假死,且没有任何进度反馈。这不仅是性能问题,更是用户体验的硬伤。
原生上传的局限
// 常见误区:直接提交 FormData
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData
});
这种写法的问题很明显:无法控制并发,没有进度条,网络中断后必须重头开始。对于超过 50MB 的文件,这种体验几乎是不可接受的。
核心解决方案
1. 分片上传
利用 File.slice() API 将大文件切割成小块,并行或串行发送。这样既能避免单次请求过大导致超时,也能通过并发控制提升速度。
class ChunkUploader {
constructor(file, options = {}) {
this.file = file;
this.chunkSize = options.chunkSize || 1024 * 1024; // 默认 1MB
this.chunks = Math.ceil(file.size / this.chunkSize);
this.uploadedChunks = 0;
}
async upload() {
const promises = [];
for (let i = ; i < .; i++) {
start = i * .;
end = .(start + ., ..);
chunk = ..(start, end);
promises.(.(chunk, i));
}
.(promises);
.();
}
() {
formData = ();
formData.(, chunk);
formData.(, index);
formData.(, .);
formData.(, ..);
(, {
: ,
: formData
});
.++;
.(. / .);
}
() {
.();
}
() {
(, {
: ,
: { : },
: .({ : .., : . })
});
}
}
uploader = (file, { : * });
uploader.();


