Axios传递FormData对象与其他参数时后端无法获取FormData的问题咨询

这是个非常常见的Axios上传误区，我来帮你拆解问题并给出可行的解决方案：

问题根源 #

你第二种写法失效的核心原因是：当你把formData和schema包装成普通JS对象{ formData, schema }传给Axios的post方法时，Axios默认会把这个对象序列化为JSON格式发送，请求的Content-Type会变成application/json，而不是上传文件需要的multipart/form-data。

这种情况下，后端无法识别JSON里的FormData结构，自然req.files拿不到文件，req.body.formData也只是一个空对象的JSON序列化结果。

解决方案 #

方案1：把额外参数直接追加到FormData中（最推荐） #

既然要上传文件，就保持请求为multipart/form-data格式，把额外的schema参数直接追加到FormData里：

uploadFiles(formData, schema) { 
  // 把schema转成JSON字符串追加到FormData，避免复杂对象序列化问题
  formData.append('schema', JSON.stringify(schema));
  console.log("Uploading files...", ...formData); 
  return instance 
    .post(`upload`, formData) 
    .then(response => console.log(response.status)) 
}

后端处理方式：

• 通过req.files正常获取上传的文件
• 通过req.body.schema拿到JSON字符串，再解析成对象：

  // Node.js + Express示例
  const schema = JSON.parse(req.body.schema);
  

方案2：把额外参数放在URL查询参数里 #

如果schema是不需要保密的简单参数，可以把它放在请求的params中（即URL的查询字符串部分）：

uploadFiles(formData, schema) { 
  console.log("Uploading files...", ...formData); 
  return instance 
    .post(`upload`, formData, {
      // 把schema转成JSON字符串放在查询参数里
      params: { schema: JSON.stringify(schema) }
    }) 
    .then(response => console.log(response.status)) 
}

后端处理方式：

• 通过req.files获取文件
• 通过req.query.schema拿到JSON字符串并解析：

  const schema = JSON.parse(req.query.schema);
  

方案3：混合发送JSON和FormData（不推荐） #

如果你一定要分开传递两种格式的数据，需要手动构造请求体和设置请求头，但这种方式后端处理逻辑会更复杂，容易出问题，一般不建议使用。

总结 #

最稳妥且易维护的方式是方案1，所有数据都通过FormData传递，保持请求格式统一，后端也能正常解析文件和参数。

内容的提问来源于stack exchange，提问作者Timo K