Fetch API 通过 FormData 自动构造 multipart/form-data 请求体并设置带 boundary 的 Content-Type，无需手动拼接或指定 headers；正确用法是直接传 formData 作为 body，避免手动设置 Content-Type。

Fetch API 本身不直接“生成” multipart/form-data 请求体，而是靠 FormData 对象自动构造符合规范的请求体（含 boundary、字段分隔、文件二进制嵌入等）。关键在于正确创建 FormData 并传给 fetch，而不是手动拼接字符串或设置 Content-Type。

用 FormData 构造请求数据

这是最标准、最可靠的方式。浏览器会自动设置正确的 Content-Type（如 multipart/form-data; boundary=----WebKitFormBoundary...），无需手动指定，也不应覆盖它。

• 创建空 FormData 实例：const formData = new FormData();
• 追加字段：formData.append('username', 'alice');
• 追加文件（从 input[type=file] 或 Blob/File 对象）：formData.append('avatar', fileInput.files[0]);
• 可多次 append 同名字段（如多图上传），后端会收到数组

调用 fetch 时不要设置 Content-Type

如果手动设置了 headers: { 'Content-Type': 'multipart/form-data' }，反而会破坏自动 boundary 机制，导致后端无法解析。fetch 识别到 body 是 FormData 类型时，会自动生成带 boundary 的 header。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• ✅ 正确写法：fetch('/upload', { method: 'POST', body: formData })
• ❌ 错误写法：fetch('/upload', { method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, body: formData })

处理文件 + 普通字段混合提交

FormData 天然支持混合类型：文本字段和文件字段可以共存，顺序任意，fetch 会统一打包。

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

• 示例：formData.append('title', 'My Photo');
formData.append('image', imageFile);
formData.append('tags', JSON.stringify(['nature', 'sunset']));
• 注意：JSON 字符串是普通文本字段；若需传结构化数据且后端支持，也可用多个同名字段模拟数组

服务端接收注意事项（补充说明）

前端无需关心 boundary 细节，但后端需使用支持 multipart 解析的中间件（如 Express 的 multer、Koa 的 koa-multer、Python Flask 的 request.files 等）。纯 JSON 解析器（如 body-parser）无法处理 multipart 请求，会读不到字段。

• 常见错误：后端没配置 multipart 解析 → 所有字段为空
• 调试建议：在后端打印原始请求头，确认 Content-Type 是否为 multipart/form-data 并含 boundary=