fetch 上传多图应将文件逐个 append 到同名 formdata 字段（如 'images'），禁用手动设置 content-type，后端用 multer.array('images', 10) 接收。
Fetch 发送 FormData 实现多图并发上传，核心在于：把多个文件一次性塞进 FormData，用单个 fetch 请求提交，而不是为每张图发一个请求。这样既减少请求开销，又便于后端统一处理。
构造 FormData 时正确添加多个文件
关键点是给每个文件字段用相同 name（如 images），并确保 append 的第二个参数是 File 对象（不是路径或 base64）。
- 从
<input type="file" multiple>获取的files是 FileList，需转为数组再遍历 - 不能直接 append 整个 FileList，必须逐个 append 单个 File
- name 保持一致，后端才能识别为同名多值字段（如 PHP 的
$_FILES['images']数组）
示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
Array.from(fileInput.files).forEach(file => {
formData.append('images', file); // 注意 name 统一
});
fetch 配置要省略 Content-Type
FormData 自带 boundary，浏览器会自动设置正确的 Content-Type: multipart/form-data; boundary=...。手动设会破坏格式，导致后端收不到文件。
- 不要写
headers: { 'Content-Type': 'multipart/form-data' } - 只需传
{ method: 'POST', body: formData } - 如果加了 headers，删掉即可
处理并发与错误更稳妥的方式
虽然单请求已实现“并发上传”，但还需考虑失败重试、进度反馈和用户提示。
- 监听
upload.onprogress需通过XMLHttpRequest；fetch 本身不支持原生上传进度，可改用ReadableStream分块读取（较复杂），或接受无进度条 - 后端返回结构建议统一：成功时返回 { code: 0, data: [ { url: "...", name: "a.jpg" }, ... ] }，失败时 { code: 1, msg: "xxx" }
- 上传中禁用按钮，响应后根据 code 判断是否清空 input.value 或显示结果
后端接收要点（以 Node.js + multer 为例）
前端用同名字段传多文件，后端需配置支持数组解析。
- multer 中用
upload.array('images', 10)接收最多 10 个名为 images 的文件 - Express 默认不解析 multipart，必须配 multer 中间件
- 注意文件大小限制（multer 的 limits 属性）和临时存储路径
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
