JavaScript文件上传教程：FileAPI详解

本文深入解析了JavaScript中文件上传的核心技术路径，明确区分了File API仅用于浏览器端本地文件读取与预览（如通过FileReader或URL.createObjectURL），而真正上传必须依赖fetch（推荐FormData方式）或XMLHttpRequest；重点强调避免低效的base64转换、合理选择readAsArrayBuffer()或流式处理应对大文件、利用XMLHttpRequest实现精准上传进度监听，并指出前端校验（size/type/扩展名组合）仅为用户体验优化，绝不能替代后端安全验证——同时提醒开发者直面网络中断、超时、分片失败等真实生产环境中的复杂边界问题，需结合状态管理与后端协同解决。

File API 读取本地文件内容（非上传）

File API 本身不上传文件，只负责在浏览器端读取、校验、预览用户选中的文件。真正上传得靠 fetch 或 XMLHttpRequest 发送二进制数据。

常见错误是以为 File 对象能直接“上传”，其实它只是 Blob 的子类，没有网络能力。你得先用 FileReader 读取内容，或直接把 File 当作 FormData 的值传给请求。

• input[type="file"] 的 files 属性返回 FileList，每个项是 File 实例
• File 继承自 Blob，所以可直接用于 URL.createObjectURL() 预览图片
• 读取大文件时别用 readAsText()，优先用 readAsArrayBuffer() 或流式处理（stream() + ReadableStream）

用 FormData + fetch 上传文件（推荐方式）

这是目前最简洁、兼容性好（Chrome 42+、Firefox 39+）、支持多文件和字段混合提交的方式。

关键点：不要手动调用 FileReader 再转成 base64——既浪费内存又拖慢速度，FormData 能直接接受 File 对象并自动设置 Content-Type。

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const formData = new FormData();
files.forEach(file => {
formData.append('files', file); // 后端接收字段名是 'files'
});
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData,
// ⚠️ 不要设 'Content-Type'！让浏览器自动设置 boundary
});
console.log(await res.json());
} catch (err) {
console.error('上传失败:', err);
}
});

监听上传进度（XMLHttpRequest 更可控）

fetch 没有原生上传进度事件，必须切回 XMLHttpRequest。虽然略重，但对大文件或需实时反馈的场景不可替代。

注意：进度事件绑定必须在 open() 之后、send() 之前；且只能监听 upload 对象，不是 xhr 本身。

• xhr.upload.onprogress 的 event.loaded 和 event.total 是字节数，不是百分比
• 如果后端用了 Nginx 等代理，可能截断 Content-Length，导致 event.total === 0，此时只能显示“上传中”而非百分比
• 移动端 Safari 对 upload.onprogress 支持稳定，但部分安卓 WebView 有延迟

文件校验与限制（前端只是辅助）

前端校验不能替代后端检查，但能立刻反馈、减少无效请求。重点防的是误操作，不是绕过攻击。

常用判断逻辑应组合使用，比如：file.size + file.type + 文件扩展名（file.name.split('.').pop()），因为 type 可被伪造，扩展名也可能错。

• 图片 MIME 类型建议用 file.type.startsWith('image/') || ['jpg','jpeg','png','gif'].includes(ext)
• 限制单个文件大小：检查 file.size > 5 * 1024 * 1024（5MB），超过就 e.target.value = '' 清空 input
• 多文件上传时，input.multiple 属性开启后，e.target.files 才会是多个，否则只取第一个

文件上传真正的复杂点不在 API 调用，而在错误边界：网络中断、后端拒绝、超时、分片失败、断点续传、取消上传时的资源清理。这些没法靠 File API 解决，得靠状态管理 + 重试策略 + 后端配合。

今天关于《JavaScript文件上传教程：FileAPI详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！