直接使用 FormData 即可，它原生支持键值对和二进制文件；可通过表单 DOM 节点自动收集数据，或手动 append 文本、文件（含多文件及自定义文件名）；配合 fetch 上传时无需设置 Content-Type，浏览器自动处理 multipart/form-data 及 boundary。

直接用 FormData 就行，它专为表单数据（尤其是文件上传）设计，原生支持键值对和二进制文件，不用手动拼接或转 JSON。

从表单元素自动获取数据

如果页面已有 <form> 元素，最简单的方式是直接传入表单 DOM 节点，FormData 会自动读取所有带 name 的字段（包括 input[type=file]）：

const form = document.querySelector('#myForm');
const formData = new FormData(form); // 自动收集所有 name 字段

注意：提交按钮（如 type="submit"）的值默认不会被包含；若需手动添加，用 append() 方法。

手动添加字段和文件

适合动态构建数据、上传前处理，或没有真实表单的情况：

Alibabacloud Sdk Client Initialization For Java

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

下载

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

• 普通文本字段：formData.append('username', 'Alice');
• 单个文件（来自 <input type="file">）：formData.append('avatar', fileInput.files[0]);
• 多个同名文件（如多图上传）：Array.from(fileInput.files).forEach(f => formData.append('photos', f));
• 指定文件名（覆盖原始名）：formData.append('logo', blob, 'custom-logo.png');

配合 fetch 上传（推荐）

FormData 可直接作为 fetch 的 body，浏览器自动设置正确的 Content-Type（multipart/form-data，含 boundary），无需手动设置：

fetch('/upload', {
  method: 'POST',
  body: formData // ✅ 直接传入
})
.then(res => res.json())
.then(data => console.log(data));

⚠️ 注意：不要手动设置 headers: { 'Content-Type': '...' }，否则会破坏 boundary，导致后端无法解析。

调试与注意事项

开发时可快速检查内容：

• 遍历查看所有字段：for (let [key, value] of formData.entries()) { console.log(key, value); }
• 获取某个字段所有值：formData.getAll('tags')（适用于多选或多次 append）
• 文件对象本身不能用 JSON.stringify，但 FormData 内部已妥善处理二进制数据
• Axios 用户：传 formData 时也别设 Content-Type，让 Axios 自动处理