用 fetch 上传文件需构造 FormData 对象并直接传入 body,不手动设置 Content-Type;服务端需用 multer 等中间件解析 multipart/form-data,字段名须前后端一致。

用 fetch 上传文件,核心是构造 FormData 对象并把它作为请求体发送,服务器端按 multipart/form-data 解析即可。
准备 FormData 并添加文件
从 <input type="file"> 获取文件后,直接 append 到 FormData 中。可以添加多个字段(如文件名、用户 ID 等),它们会和文件一起被编码发送:
const input = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', input.files[0]); // 必填:文件本身
formData.append('filename', 'my-report.pdf'); // 可选:额外字段
formData.append('userId', '123'); // 可选:其他表单数据
用 fetch 发送请求(不手动设 Content-Type)
关键点:不要手动设置 Content-Type。浏览器会自动设置为 multipart/form-data 并带上正确的 boundary。手动设置反而会导致服务端解析失败:
使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。
fetch('/upload', {
method: 'POST',
body: formData // 直接传入,无需 JSON.stringify
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));
服务端接收注意(以 Express 为例)
Node.js 默认不解析 multipart/form-data,需借助中间件(如 multer):
-
multer会把文件存到内存或磁盘,并将字段挂到req.body,文件信息挂到req.file或req.files - 确保前端
formData.append('file', ...)的字段名和服务端配置的字段名一致(例如upload.single('file'))
处理上传进度(可选)
原生 fetch 不支持上传进度监听,可用 XMLHttpRequest 或封装库(如 axios)。若坚持用 fetch,目前只能靠服务端返回状态轮询,或改用 ReadableStream + UploadStream(较复杂,兼容性有限)。

















