React中Axios POST提交FormData数据异常问题咨询

一、控制台无法打印FormData内容的解决办法 #

FormData是浏览器提供的特殊对象，直接用console.log只能打印对象结构，看不到实际键值对。可以用以下两种方式查看内容：

方法1：遍历FormData条目 #

// 替换原console.log("FormData:", formData);
console.log("FormData内容：");
for (const [key, value] of formData.entries()) {
  console.log(`${key}:`, value);
}

方法2：转换为普通对象（文件对象会显示为[object File]） #

const formDataObj = Object.fromEntries(formData.entries());
console.log("FormData转换为对象：", formDataObj);

二、数据库仅存储ID的解决办法 #

出现这种情况通常是后端未正确接收到FormData中的字段值，或者前端请求配置/字段名有误，以下是排查和修复步骤：

1. 修正Axios请求头配置 #

发送FormData时，需要确保请求头为multipart/form-data，Axios通常会自动识别FormData并设置正确的头，但手动指定可以避免异常：

axios.post("/admission", formData, {
  headers: {
    "Content-Type": "multipart/form-data"
  }
})

注意：不要手动添加boundary（比如multipart/form-data; boundary=xxx），浏览器会自动生成正确的boundary。

2. 检查前端字段名与后端的一致性 #

你的代码里存在字段名可能的笔误：

// 这里字段名写的是installment1Date1，但state是installmentDate1，可能后端期望的是installmentDate1
formData.append("installment1Date1", installmentDate1);
// 同理下面的installment1Date2也可能是笔误
formData.append("installment1Date2", installmentDate2);

建议修正为：

formData.append("installmentDate1", installmentDate1);
formData.append("installmentDate2", installmentDate2);

务必确保所有append的键名和后端接口接收的参数名完全一致。

3. 排查后端FormData解析配置 #

如果后端是Node.js/Express，需要使用multer中间件处理文件上传和FormData解析；如果是其他后端框架，要确保启用了multipart/form-data类型请求的解析支持。没有正确配置解析中间件的话，后端无法获取FormData中的字段，只会插入默认的ID。

4. 确认前端state值是否正确 #

在创建FormData之前，先打印所有state值，确认数据已正确存入：

// 在const formData = new FormData();之前添加
console.log("当前表单数据：", {
  image, name, phone, email,
  selectedSubject1, selectedSubject2, selectedSubject3, selectedSubject4, selectedSubject5, selectedSubject6,
  selectedCourse1, selectedCourse2, selectedCourse3, selectedCourse4,
  installmentInput1, installmentDate1, installmentInput2, installmentDate2,
  address
});

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