FormData 可直接用表单 DOM 元素初始化，自动收集所有带 name 的字段（含文件），支持多选与复选框逻辑；额外字段用 append() 添加；配合 fetch 上传无需设 Content-Type；注意 name 属性、disabled 元素及中文文件名编码问题。
用 FormData 打包文件上传表单的数据，核心就一条：直接传入表单 DOM 元素，它会自动收集所有带 name 的字段（包括文件输入），无需手动遍历。
直接用表单元素初始化 FormData
只要表单中每个输入控件（input、select、textarea）都有 name 属性，FormData 就能全自动提取数据：
- 文件域（
<input type="file">）会被当作File对象添加，支持多选（multiple） - 普通文本、下拉框、复选框等值都会按 name → value 映射收录
- 复选框未勾选时不会被包含，符合表单默认行为
示例：
<form id="uploadForm"> <input type="text" name="title" value="我的图片"> <input type="file" name="avatar" accept="image/*"> <input type="file" name="files" multiple> </form>
JS 中只需一行：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const form = document.getElementById('uploadForm');
const formData = new FormData(form); // ✅ 自动打包全部字段
手动追加额外字段（比如 token 或 ID）
如果后端还需要额外参数（如用户 token、分类 ID），用 append() 直接加即可，不影响已有字段：
- 同名字段可多次
append，后端收到的是数组（适用于多文件或复选框） - 文件可以单独构造
File对象再 append，适合非表单场景（如拖拽上传）
示例：
formData.append('token', 'abc123');
formData.append('category', 'user');
// 追加一个 Blob（比如 canvas 导出的图片）
canvas.toBlob(blob => {
formData.append('dynamicImage', blob, 'snapshot.png');
}, 'image/png');
配合 fetch 上传（推荐）
FormData 天然适配 fetch，不需要设 Content-Type —— 浏览器会自动设置为 multipart/form-data 并带上正确的 boundary：
- 避免手动拼接请求体或设置 header，出错率低
- 服务端（如 Express、PHP、Spring）都能原生解析 multipart 数据
- 上传进度可通过
XMLHttpRequest.upload.onprogress监听（fetch 暂不支持，需回退到 xhr）
简单上传调用：
fetch('/api/upload', {
method: 'POST',
body: formData // ✅ 直接传入
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));
注意几个常见坑
实际用的时候容易卡在这几处：
-
表单没写
name：任何字段（包括文件 input）必须有name，否则FormData忽略 -
禁用了表单元素：disabled 的字段不会被收集，如需强制提交，改用
append()手动加 - 中文文件名乱码：现代浏览器基本已修复；若后端是旧版 Tomcat 等，需统一编码为 UTF-8（服务端配置）
-
想查看内容调试？不能直接
console.log(formData)，要用for (let [key, value] of formData.entries())遍历打印
