如何使用Fetch API上传文件并同时携带JSON格式字符串数据？

嘿，我一眼就看出问题出在哪了——你修改后的代码错误地把FormData和字符串参数打包成了一个普通对象作为fetch的body，这完全不符合文件上传的请求格式要求！

为什么原来的写法会失败？ #

当你把body设置成{ file: formData, str }时，fetch默认会把这个对象序列化成JSON格式发送给后端。但FormData对象是无法被正确序列化为JSON的，最终发送的请求体其实是类似{"file":{},"str":"from client"}的内容。而后端原本是按照multipart/form-data（文件上传的标准格式）来解析请求的，自然无法识别这种JSON格式的请求体，所以才会出现req.files为空、req.body解析出奇怪内容的情况。

正确的做法：把所有参数都放进同一个FormData里 #

文件上传必须用multipart/form-data格式，所有需要传递的参数（包括文件和额外的字符串）都应该添加到同一个FormData对象中，而不是分开包装。修正后的代码如下：

const uploadFile = async (e) => {
  // 别忘了加async，不然await会报错！
  const uploadedFile = e.target.files[0]; 
  const formData = new FormData(); 
  const str = 'from client'; 

  // 把文件和字符串都追加到FormData里
  formData.append('data', uploadedFile); 
  formData.append('str', str);

  const rawResponse = await fetch('/upload-file', { 
    method: 'POST', 
    body: formData // 直接传递FormData即可，fetch会自动设置正确的Content-Type
  }); 
}; 
// 注意：需要把这个函数绑定到文件输入框的change事件，比如：
// <input type="file" onchange="uploadFile(event)" />

后端如何获取数据？ #

假设你用的是Express + Multer（从你提到req.files来看应该是），现在就能正常获取到数据了：

• 文件：req.files.data（和你之前正常上传时的用法一致）
• 字符串参数：req.body.str

这样修改后，你的文件和字符串参数就能同时被后端正确接收啦！

内容的提问来源于stack exchange，提问作者s.khan