设置Content-Type后Axios请求仍无法接收FormData的问题

看起来你遇到的核心问题是手动设置Content-Type导致浏览器无法生成正确请求头，加上可能存在的数据传递包裹错误，咱们一步步来解决：

1. 移除Axios中手动设置的multipart/form-data头 #

当发送FormData时，浏览器会自动生成包含boundary分隔符的Content-Type头（比如multipart/form-data; boundary=----WebKitFormBoundaryxxxx），这个分隔符是服务器正确解析表单数据的关键。如果你手动设置Content-Type: multipart/form-data，会丢失这个boundary，导致Axios无法正确处理FormData，最终把它序列化成空对象。

修改你的Axios请求代码，去掉手动设置的headers：

export const addProject = data => dispatch => {
  axios
    .post("/api/portfolio/add-project", data)
    .then(res => {
      dispatch({ type: ADD_PROJECT, payload: res.data });
    })
    .catch(err => {
      // 建议把失败的action类型改成不同的，比如ADD_PROJECT_ERROR，方便区分状态
      dispatch({ type: ADD_PROJECT_ERROR, payload: err });
    });
};

如果用配置对象的写法，同样去掉headers中的Content-Type：

axios({
  method: "post",
  url: "/api/portfolio/add-project",
  data: data
})

2. 确认传递给addProject的是FormData实例本身 #

你提到网络面板中看到{"uploadData":{}}，这大概率是因为调用addProject时，把FormData包裹在了一个对象里传递，比如：

// 错误的调用方式
dispatch(addProject({ uploadData }));

这种情况下，Axios会把这个对象序列化成JSON，而FormData实例在JSON序列化后会变成{}，所以才会出现你看到的payload。

正确的调用方式应该是直接传递FormData实例：

// 正确的调用方式
dispatch(addProject(uploadData));

3. 额外验证（可选） #

如果需要添加其他自定义headers（比如Authorization），可以保留headers配置，但不要覆盖Content-Type，Axios会自动处理：

axios.post("/api/portfolio/add-project", data, {
  headers: {
    Authorization: `Bearer ${yourAuthToken}`
  }
})

完成以上修改后，重新测试，你应该能在网络面板的payload中看到以Form Data形式展示的各个字段（比如peer-video、documents等），而不是空对象了。

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