React子组件传递FormData给父组件后内容为空 接口请求失败

• FormData是二进制容器，无法被JSON序列化：你在sendEmail函数中直接将包含FormData的对象通过JSON.stringify转换，序列化后FormData内容会完全丢失，最终传给后端的files字段是空值，自然无法触发后端接口逻辑。
• 请求格式与后端接收规则不匹配：后端接口定义的FormFileCollection类型只能接收multipart/form-data格式的文件，你当前用application/json格式提交，后端无法解析到文件和参数，所以请求进不到方法内。
• 控制台显示误导：部分浏览器控制台预览未展开的FormData对象时，会默认显示0条条目，你可以通过console.log(Array.from(fileAttached.entries()))确认FormData内容实际是正常存在的，这不是核心问题。

1. 改造前端sendEmail请求逻辑 #

不要用JSON承载参数，统一用FormData承载所有参数和文件，不要手动设置Content-Type请求头，浏览器会自动生成带分隔符的multipart/form-data头：

function sendEmail(templateName, variables, attachment){
  console.log("sending email...");
  const formData = new FormData();
  // 加入普通参数，复杂类型先序列化为字符串
  formData.append("templateName", templateName);
  formData.append("recipients", JSON.stringify(["abc@xyz.com"]));
  formData.append("variables", JSON.stringify(variables));
  // 加入附件内容
  if(attachment){
    for(const [key, file] of attachment.entries()){
      formData.append(key, file);
    }
  }

  fetch('https://localhost:5001/api/Email',{
    method:'POST',
    body: formData
  });
}

2. 调整后端接口参数绑定规则 #

给接口参数加上[FromForm]注解，声明后端从form-data格式中解析参数：

[HttpPost]
public JsonResult Get([FromForm] EmailRequest email)
{
    // 现在请求可以正常进入该方法
    // 注意：recipients和variables字段需要你手动反序列化字符串为对应类型
    // 也可以调整前端传参方式，按数组索引格式append参数，不需要序列化，比如：
    // formData.append("recipients[0]", "abc@xyz.com")
}

3. 可选优化（简化代码） #

你不需要提前在子组件构造FormData存在reducer里，直接存File对象更简洁，修改子组件的changeHandler：

const changeHandler = (event) => {
  dispatch({ type: "FILE_ATTACHED", payload: event.target.files[0] })
};

之后在sendEmail中直接把File对象append到FormData里即可，减少不必要的FormData操作。

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