前端大文件上传实战:分片、断点续传与拖拽优化
痛点分析
很多项目里,一旦遇到几百兆的文件,原生的 <input type="file"> 往往会让浏览器直接卡死。用户既看不到进度条,也无法中断操作,体验极差。这不仅仅是慢的问题,更是用户体验的硬伤。
核心方案一:分片上传
处理大文件的第一步是切片。将大文件切割成多个小块(Chunk),并发或串行发送,能显著降低单次请求的压力,同时为进度条提供数据支持。
class ChunkUploader {
constructor(file, options = {}) {
this.file = file;
// 默认每片 1MB,可根据网络情况调整
this.chunkSize = options.chunkSize || 1024 * 1024;
this.chunks = Math.ceil(file.size / this.chunkSize);
this.uploadedChunks = 0;
}
async upload() {
const promises = [];
for (let i = 0; i < this.chunks; i++) {
const start = i * this.chunkSize;
const end = Math.min(start + this.chunkSize, this.file.size);
const chunk = this..(start, end);
promises.(.(chunk, i));
}
.(promises);
.();
}
() {
formData = ();
formData.(, chunk);
formData.(, index);
formData.(, .);
formData.(, ..);
(, {
: ,
: formData,
});
.++;
.(. / .);
}
() {
.();
}
() {
(, {
: ,
: { : },
: .({ : .., : . }),
});
}
}
uploader = (file, { : * });
uploader.();


