JavaScript用FormData上传文件的方法与示例

本文深入讲解了JavaScript中利用FormData实现文件上传的核心技术与最佳实践，涵盖从创建和填充FormData对象（支持表单自动提取或手动添加File/Blob及普通字段）、使用fetch发起简洁可靠的上传请求（浏览器自动处理multipart/form-data边界与编码），到借助XMLHttpRequest监听实时上传进度等关键环节；同时指出常见陷阱如不可用文件路径、Content-Type不可手动设置、fetch不支持进度事件等，并给出多文件上传、认证头添加、前端预览及后端适配等实用解决方案，是前端开发者高效、稳健实现文件上传的必备指南。

JavaScript 实现文件上传，核心是用 FormData 构建表单数据，再配合 fetch 或 XMLHttpRequest 发送到后端。它能自动处理文件二进制内容、边界（boundary）和编码，比手动拼接更可靠。

如何创建并填充 FormData 对象

FormData 可以从 HTML 表单元素直接生成，也可以手动创建后追加字段。文件必须通过 File 或 Blob 实例添加，不能用路径字符串。

• 从表单创建（推荐）：
  
  <input type="file" name="avatar">
  
  const form = document.getElementById("uploadForm");
const formData = new FormData(form); // 自动包含所有带 name 的 input[type=file]
• 手动创建并添加文件：
  const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
if (fileInput.files.length > 0) {
  formData.append("photo", fileInput.files[0]); // 第二个参数是 File 对象
}
• 还可添加普通字段：
  formData.append("username", "alice");
formData.append("description", "My profile photo");

使用 fetch 发送 FormData（最常用）

调用 fetch 时，直接传入 FormData 实例即可。注意：不要设置 Content-Type 头，浏览器会自动设置为 multipart/form-data 并带上正确的 boundary。

• 基础上传示例：
  fetch("/api/upload", {
  method: "POST",
  body: formData // 不要加 headers: { "Content-Type": ... }
r.json()).then(data => console.log(data));
• 如需带认证或其它头（除 Content-Type 外），可以加：
  headers: { "Authorization": "Bearer xxx" } —— 但依然不要覆盖 Content-Type
• 支持上传多个同名文件：
  for (let file of fileInput.files) {
  formData.append("photos", file); // 使用相同 key
}，后端收到的是文件数组

监听上传进度（仅 XMLHttpRequest 支持原生进度）

fetch 目前不提供上传进度事件，如需显示进度条，得用 XMLHttpRequest：

• const xhr = new XMLHttpRequest();
xhr.upload.onprogress = e => {
  if (e.lengthComputable) {
    console.log(`上传中：${(e.loaded / e.total * 100).toFixed(1)}%`);
  }
};
xhr.open("POST", "/api/upload");
xhr.send(formData);
• 注意：xhr.upload 是专门用于监听上传过程的对象，xhr.onprogress 是下载进度

常见问题与注意事项

• 文件没传过去？ 检查 input 是否有 name 属性（表单方式），或 append 时 key 是否写错；后端接收字段名必须一致
• 后端收不到文件？ 确保后端接口支持 multipart/form-data 解析（如 Express 需 multer，Koa 需 @koa/multer）
• 大文件卡顿？ 可结合分片上传或添加 loading 提示；FormData 本身不压缩，体积等于原始文件
• 想预览图片？ 用 URL.createObjectURL(file) 生成临时 URL，赋给 即可，无需上传

终于介绍完啦！小伙伴们，这篇关于《JavaScript用FormData上传文件的方法与示例》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！