问题背景
实际项目中常遇到大文件上传导致浏览器卡顿且无进度提示的问题。原生 input 类型 file 在上传大文件时,缺乏进度反馈和断点续传能力,严重影响用户体验。
原生上传局限
<!-- 反面教材:原生文件上传 -->
<input type="file" onchange="uploadFile(this.files[0])" />
<script>
function uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
// 直接上传,没有进度,没有断点续传
fetch('/api/upload', {
method: 'POST',
body: formData
});
}
</script>
核心实现方案
1. 分片上传
将大文件切割为多个小片段并行或顺序上传,降低单次请求负载并支持进度追踪。
// 正确姿势:分片上传
class ChunkUploader {
constructor(file, options = {}) {
this.file = file;
this.chunkSize = options.chunkSize || 1024 * 1024; // 1MB
this.chunks = Math.ceil(file.size / this.chunkSize);
. = ;
}
() {
promises = [];
( 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.();


