使用 fetch 配合 formdata 提交表单时，必须不手动设置 content-type，让浏览器自动添加 multipart/form-data 及 boundary；可从 form 元素创建或手动 append 字段与文件，额外 header（如 authorization）可保留，但禁止指定 content-type。
使用 fetch 配合 FormData 提交表单，核心是让浏览器自动设置正确的请求头（尤其是 Content-Type: multipart/form-data），并由 FormData 管理字段和文件。关键点：**不要手动设置 Content-Type 头，否则会破坏边界（boundary）机制。**
创建 FormData 并添加数据
从表单元素直接构造，或手动追加字段：
- 从已有
<form></form>元素创建：const formData = new FormData(document.querySelector('form'));
它会自动包含所有带name属性的控件（input、select、textarea），包括文件输入。 - 手动添加字段（适合动态构建）：
formData.append('username', 'alice');formData.append('avatar', fileInput.files[0]);
注意：文件必须是File或Blob对象，不能是路径字符串。
用 fetch 发起请求（不设 Content-Type）
直接传入 FormData 实例作为 body，让浏览器自动处理编码和头部：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ✅ 正确写法（不指定
headers）：fetch('/api/upload', { method: 'POST', body: formData }); - ❌ 错误写法（手动设
Content-Type）：{ headers: { 'Content-Type': 'multipart/form-data' } }
这会导致请求失败——浏览器无法插入必需的 boundary 字符串。 - 如需额外 header（如认证 token），可保留其他字段，但跳过
Content-Type：{ method: 'POST', body: formData, headers: { 'Authorization': 'Bearer xxx' } }
处理响应与常见注意事项
提交后通常需解析 JSON 响应，同时注意表单默认行为和错误处理：
- 记得调用
event.preventDefault()阻止原生表单提交； - 响应体是 JSON？用
response.json()解析：fetch(...).then(r => r.json()).then(data => console.log(data)); - 上传大文件时，可监听
upload.onprogress（需用fetch的底层ReadableStream或改用XMLHttpRequest；fetch本身不支持上传进度，这是常见限制）； - 服务端需能接收
multipart/form-data（如 Express 用multer，Node.js 原生需解析流）。
不复杂但容易忽略。只要记住：FormData 是“黑盒”，交给 fetch 就行，别碰它的 Content-Type。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
