前端文件上传优化方案
引言
前端文件上传是 Web 开发中的常见需求。使用原生的 <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;
this.chunks = Math.ceil(file.size / this.chunkSize);
this. = ;
}
() {
promises = [];
( i = ; i < .; i++) {
start = i * .;
end = .(start + ., ..);
chunk = ..(start, end);
promises.(.(chunk, i));
}
.(promises);
.();
}
() {
formData = ();
formData.(, chunk);
formData.(, index);
formData.(, .);
formData.(, ..);
(, {
: ,
: formData
});
.++;
.(. / .);
}
() {
.();
}
() {
(, {
: ,
: { : },
: .({ : .., : . })
});
}
}


