如何用 FormData 配合 Fetch 实现无刷新的多文件上传

用 FormData 配合 Fetch 实现多文件无刷新上传，需遍历 input.files 将每个文件以相同字段名（如“files”）append 到 FormData；Fetch 会自动设置 multipart/form-data 及 boundary；进度监听推荐 XMLHttpRequest 或 axios；后端需用 multer 等中间件解析 multipart 数据。用 FormData 配合 Fetch 实现多文件无刷新上传，核心是把 <input type="file" multiple> 选中的文件构造成 FormData 对象，再通过 Fetch 发送到后端，同时处理好进度、错误和响应解析。构造 FormData 并添加多个文件用户选择多个文件后，input.files 是一个 FileList 对象。不能直接传入 FormData，但可以遍历它，逐个 append 到 FormData 中。注意：每个文件要使用相同的字段名（如 "files"），后端才能识别为数组或多个文件。示例代码：const input = document.querySelector('input[type="file"]'); input.addEventListener('change', async () => { const formData = new FormData(); for (let file of input.files) { formData.append('files', file); // 字段名统一，后端接收为多文件 } try { const res = await fetch('/upload', { method: 'POST', body: formData, // ?? 不要手动设置 Content-Type！浏览器会自动设为 multipart/form-data 并带上 boundary }); const data = await res.json(); console.log('上传成功', data); } catch (err) { console.error('上传失败', err); } });监听上传进度（需后端支持流式响应）Fetch 原生不提供上传进度事件，但可通过 XMLHttpRequest 或第三方库（如 axios）实现。如果坚持用 Fetch，可借助 ReadableStream + ProgressEvent 模拟，但兼容性和实用性有限。更推荐方案： 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。