axios post同时传递普通参数与FormData多文件时接收失败怎么办

问题根源 #

• axios默认会将传入的普通JS对象类型的data序列化为JSON字符串，而FormData对象无法被JSON序列化，嵌套在普通对象里传输时会被处理为空值，因此后端收到的files字段是空数组。
• 文件只能通过multipart/form-data格式的请求体传输，JSON格式本身不支持二进制文件数据的传输，将FormData嵌套在普通JSON对象里的写法本身不符合传输规范。
• 第二种写法直接传入FormData实例时，axios会自动将请求头的Content-Type设置为multipart/form-data，同时按表单格式序列化所有数据，所以后端可以正常解析到文件。

解决方法 #

不要把普通字段和FormData分开存放，将所有需要提交的普通字段也追加到同一个FormData实例中，直接把整个FormData作为请求的data参数即可：

const formData = new FormData();
// 追加普通字段
formData.append('name', name);
// 追加文件字段，对应后端接收的files数组
for (const i of Object.keys(item_images)) {
  formData.append('files[]', item_images[i]);
}

http({
  method: el.method,
  url: el.action,
  data: formData
})

注意事项 #

不要手动给请求添加Content-Type: multipart/form-data请求头，axios检测到传入的data是FormData实例时，会自动设置对应的请求头，同时自动生成表单分隔符boundary，手动设置反而可能因为缺少正确的boundary导致后端解析失败。

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