使用 FormData 对象提交 multipart/form-data 表单，无需手动设置 Content-Type，浏览器自动添加 boundary；支持文件与文本混合提交，后端需配置 multipart 解析中间件。
Fetch 提交多部分表单数据（multipart/form-data）的关键是让浏览器自动构造请求体，而不是手动拼接或序列化——这通常通过 FormData 对象实现。
用 FormData 构建表单数据
FormData 是专门用于生成 multipart/form-data 请求体的内置对象。它能正确处理文件、文本字段，甚至嵌套字段（需注意后端解析能力）。
- 创建空实例：
const formData = new FormData(); - 追加字段：
formData.append('username', 'alice'); - 追加文件（从
<input type="file">获取）：formData.append('avatar', fileInput.files[0]); - 可多次 append 同名字段（如多个文件）：
formData.append('photos', file1); formData.append('photos', file2);
直接传给 fetch，不设 Content-Type
这是最容易出错的一点：**不要手动设置 Content-Type 头**。浏览器会根据 FormData 自动设置正确的 multipart/form-data 并附带所需的 boundary。
- ✅ 正确写法：
fetch('/upload', { method: 'POST', body: formData }); - ❌ 错误写法：
headers: { 'Content-Type': 'multipart/form-data' }—— 这会导致 boundary 缺失，后端无法解析
处理文件 + 普通字段混合提交
FormData 天然支持混合类型。文本字段和文件可以共存，顺序不影响解析。
立即学习“Java免费学习笔记（深入）”；
- 示例：
formData.append('title', 'My Post');formData.append('content', '<p>Hello</p>');formData.append('cover', coverFile); - 后端（如 Express + multer、Django、Spring Boot）需配置对应中间件来解析 multipart 数据
- 注意：若字段值是 JSON 字符串，需显式
JSON.stringify()，FormData 不会自动序列化对象
上传进度与错误处理
Fetch 本身不提供上传进度事件，但可通过 ReadableStream 或第三方库（如 axios）补充。基础场景建议结合 try/catch 和状态码判断：
- 检查响应状态：
if (!response.ok) throw new Error(`HTTP ${response.status}`); - 解析 JSON 响应：
const result = await response.json(); - 网络错误、5xx、4xx 都会进入 catch，需区分提示（如“文件太大”通常是 413，后端返回）
