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

张开发
• 2026/4/15 20:00:27 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何用 FormData 配合 Fetch 实现无刷新的多文件上传
用 FormData 配合 Fetch 实现多文件无刷新上传需遍历 input.files 将每个文件以相同字段名如“files”append 到 FormDataFetch 会自动设置 multipart/form-data 及 boundary进度监听推荐 XMLHttpRequest 或 axios后端需用 multer 等中间件解析 multipart 数据。用 FormData 配合 Fetch 实现多文件无刷新上传核心是把 input typefile multiple 选中的文件构造成 FormData 对象再通过 Fetch 发送到后端同时处理好进度、错误和响应解析。构造 FormData 并添加多个文件用户选择多个文件后input.files 是一个 FileList 对象。不能直接传入 FormData但可以遍历它逐个 append 到 FormData 中。注意每个文件要使用相同的字段名如 files后端才能识别为数组或多个文件。示例代码const input document.querySelector(input[typefile]); 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助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。

更多文章