React中使用Axios提交FormData时文件参数为空的问题

核心问题出在你手动设置了'Content-Type': 'multipart/form-data'请求头。Axios会自动识别请求体中的FormData对象，自动生成包含boundary分隔符的正确Content-Type头（格式类似multipart/form-data; boundary=----WebKitFormBoundaryxxxx），手动设置的话会丢失boundary参数，导致后端无法正确解析FormData里的文件数据。

修正后的代码 #

const formData = new FormData();
// 从state变量中设置文件上传值
formData.append("file", file);

Axios.post(url, formData)
  .then(res => console.log(res))
  .catch(err => console.error(err));

额外排查点 #

• 确认file变量是有效的File对象：append前打印console.log(file)，检查是否包含name、size等属性，避免传入undefined或空值。
• 核对后端接收的字段名：formData.append的第一个参数（示例中是"file"）必须和后端接口定义的接收字段名完全一致，包括大小写。
• 若需添加其他表单字段，直接用formData.append("字段名", 对应值)即可，无需手动修改请求头。

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