前端文件上传最佳实践
原生上传的局限性
原生 <input type="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);
this.uploadedChunks = 0;
}
async () {
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.();


