使用 FormData 构造实例可自动设置 multipart/form-data 类型，支持从表单自动获取或手动 append 字段与文件，配合 fetch 发送时勿手动设 Content-Type，后端需用对应中间件解析。

直接用 FormData 构造实例，把表单元素或文件对象 append 进去，再通过 fetch 或 XMLHttpRequest 发送即可。浏览器自动设置正确的 Content-Type（multipart/form-data），无需手动设 headers。

从 HTML 表单自动获取数据

如果页面已有 <form> 元素，最简单的方式是用表单 DOM 对象初始化 FormData：

const form = document.querySelector('#myForm');
const formData = new FormData(form); // 自动收集所有带 name 的字段，包括 file input

注意：file input 必须有 name 属性，且用户已选择文件；文本字段会以字符串形式加入，checkbox/radio 只有选中时才被包含。

手动添加字段和文件

适合动态构建数据、上传多个文件、或混合表单字段与 JS 生成值：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

立即学习“Java免费学习笔记（深入）”；

• 添加普通字段：formData.append('username', 'Alice');
• 添加单个文件：formData.append('avatar', fileInput.files[0]);
• 添加多个同名文件（如多图上传）：Array.from(fileInput.files).forEach(f => formData.append('photos', f));
• 添加 Blob 或字符串（如截图转 Blob）：formData.append('screenshot', blob, 'screen.png'); 第三个参数指定文件名

配合 fetch 发送请求

fetch 会自动处理 FormData 的边界（boundary）和编码，不用管 headers：

fetch('/upload', {
  method: 'POST',
  body: formData // 直接传入，不要加 headers: {'Content-Type': ...}
})
.then(res => res.json())
.then(data => console.log(data));

⚠️ 关键点：不要手动设置 Content-Type，否则浏览器无法写入 boundary，导致后端解析失败。

后端接收注意事项（简要提醒）

Node.js（如 Express）需用 multer、busboy 等中间件解析 multipart；PHP 直接通过 $_POST 和 $_FILES 获取；Python Flask 需用 request.form 和 request.files。确保服务端支持文件上传且配置了大小限制。