前端文件上传处理:从基础到分块上传实战
文件上传看似简单,实则涉及用户体验、性能优化和安全保障等多个层面。仅仅依赖原生的 <input type="file"> 往往无法满足生产环境的需求。本文将深入探讨如何构建健壮的文件上传方案。
常见误区
很多开发者在实现上传时容易忽略以下关键点:
- 缺乏验证:未在前端校验文件大小和类型,导致无效请求到达服务器,浪费带宽。
- 无进度反馈:用户无法感知上传状态,长时间等待容易导致页面误以为卡死。
- 错误处理缺失:网络波动或服务器异常时,没有明确的提示,用户无从下手。
- 内存溢出风险:直接通过
FormData上传超大文件可能导致浏览器内存不足。
基础上传实现
首先,我们需要确保文件符合基本规范。在发送请求前进行客户端校验是最有效的防线。
function validateAndUpload(file) {
// 限制文件大小为 10MB
if (file.size > 10 * 1024 * 1024) {
alert('File too large');
return;
}
// 限制文件类型
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
alert('Invalid file type');
return;
}
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => {
(!response.) ();
response.();
})
.( .(, data))
.( .(, error));
}

