使用 Fetch API 上传多文件需将文件通过 FormData.append("files", file) 批量添加，浏览器自动设置 multipart/form-data 及 boundary；服务端用 multer（Express）、getlist（Flask）或 $_FILES["files"]（PHP）接收，字段名须完全一致。
使用 Fetch API 上传多文件时，关键是把多个文件添加到 FormData 实例中，然后用 fetch() 发送，服务端接收 multipart/form-data 格式的数据。不需要手动设置 Content-Type，浏览器会自动添加带 boundary 的正确头。
构建 FormData 并添加多个文件
从 <input type="file" multiple> 获取文件列表后，遍历并逐个追加到 FormData。字段名（如 "files"）需和服务端约定一致，多个文件可共用同一个键名，后端会识别为数组或文件列表：
- HTML 中确保
input含multiple属性：
- JS 中获取文件并添加（推荐用同一字段名，便于后端统一处理）：
const formData = new FormData();
const files = fileInput.files;
for (let i = 0; i formData.append("files", files[i]); // 多个同名字段
} - 也可为每个文件指定唯一字段名（如
files[0]），但通常不必要，除非后端要求显式索引
发起 Fetch 请求并处理响应
调用 fetch() 时直接传入 formData，不要设置 headers 中的 Content-Type —— 浏览器会自动生成正确的 multipart/form-data; boundary=...：
- 基础请求示例：
fetch("/upload", {
method: "POST",
body: formData // 自动设置 Content-Type 和 boundary
})
.then(res => res.json())
.then(data => console.log("上传成功:", data)); - 如需额外字段（如用户 ID、描述），用
formData.append("userId", "123")一并添加，服务端可同步读取 - 建议加上
catch捕获网络或解析错误，避免静默失败
服务端接收注意事项（以常见框架为例）
前端发的是标准 multipart 数据，后端需按对应方式解析：
立即学习“Java免费学习笔记（深入）”；
- Node.js + Express：需配合
multer中间件，配置array("files")接收多个同名文件 - Python Flask：用
request.files.getlist("files")获取文件列表 - PHP：通过
$_FILES["files"]数组访问，注意其结构是二维（因多个同名字段） - 关键点：字段名必须与前端
append()的第一个参数完全一致，包括大小写和拼写
可选：添加上传进度监听（仅限现代浏览器）
Fetch 本身不支持上传进度，但可通过 XMLHttpRequest 或封装 ReadableStream 实现；若坚持用 Fetch，目前较实用的方式是改用 axios 或监听 onprogress 的替代方案。原生 Fetch 暂无标准化上传进度事件支持。
