使用 formdata 提交带文件的复合表单时，需创建 formdata 实例并 append 文本字段与 file/blob 对象，再直接传给 fetch 的 body 选项，且不可手动设置 content-type，否则会破坏浏览器自动生成的 multipart/form-data boundary。
使用 fetch 提交带文件的复合表单（如同时含文本字段和文件），核心是用 FormData 构造请求体，而不是手动拼 JSON 或设置 Content-Type —— 浏览器会自动设置正确的 multipart/form-data 边界（boundary）。
1. 创建 FormData 并追加字段和文件
把表单元素或手动构造的键值对添加进去。文件需为 File 或 Blob 对象（例如来自 <input type="file">）：
const formData = new FormData();
// 添加普通文本字段
formData.append('title', '我的图片');
formData.append('description', '这是一张测试图');
// 添加文件（假设 input 元素已选中文件）
const fileInput = document.querySelector('#file-input');
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
formData.append('image', file); // 字段名需与后端约定一致
}
// 也可追加多个同名文件（如多图上传）
// formData.append('images', file1);
// formData.append('images', file2);
2. 使用 fetch 发送请求（不设 headers）
关键点：不要手动设置 Content-Type。如果设置了（比如 'application/json' 或显式写 'multipart/form-data'），浏览器会屏蔽自动生成的 boundary，导致后端无法解析。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
fetch('/api/upload', {
method: 'POST',
body: formData // 直接传入，无需 JSON.stringify
// ⚠️ 不要加 headers: { 'Content-Type': '...' }
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(err => console.error('上传失败:', err));
3. 后端接收注意点（简要提示）
服务端需支持 multipart/form-data 解析：
- Node.js（Express）：用
multer中间件处理文件上传 - Python（Flask）：通过
request.files和request.form分别取文件和文本字段 - PHP：用
$_FILES和$_POST
4. 高级场景：添加进度监听（可选）
利用 XMLHttpRequest 的 upload.onprogress 是常见做法；fetch 原生不支持上传进度，但可通过 ReadableStream + TransformStream 拦截并计数（较复杂），多数项目仍倾向用 XMLHttpRequest 或封装好的库（如 axios）。
若坚持用 fetch，一种轻量方案是先读取文件为 ArrayBuffer，再手动分块上传（适合大文件断点续传），但这已超出“复合表单”范畴。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
