React TypeScript发送FormData到.NET API后端接收为null如何解决

.NET 针对 multipart/form-data 格式的数组类型参数默认采用「数组名[索引].属性名」的规则解析，你当前直接将整个数组JSON序列化后作为单个models字段传递，不符合后端的模型绑定规则，因此得到null值。

前端代码调整 #

遍历数组的每一项及对应属性，逐个添加到FormData中，匹配.NET的解析规则：

let models = [
    { name: "test1", order: 1, processID: 169 },
    { name: "test2", order: 2, processID: 169 },
];
let subProcessInputModels = new FormData();

// 按索引逐个拼接表单字段
models.forEach((model, index) => {
  subProcessInputModels.append(`models[${index}].name`, model.name);
  subProcessInputModels.append(`models[${index}].order`, model.order.toString());
  subProcessInputModels.append(`models[${index}].processID`, model.processID.toString());
});

SubProcessService.createSubProcess(subProcessInputModels).then((response) =>
  console.log("response", response)
)

前端注意事项 #

• 不要手动设置multipart/form-data请求头：浏览器会自动携带正确的头信息并补全boundary分隔符参数，手动设置反而可能因为缺少boundary导致解析失败。
• 如果数组元素包含可选字段，需判断字段值存在后再调用append方法，避免传递空值导致模型绑定异常。

后端验证项 #

如果修改前端后问题仍存在，检查后端接口的参数配置：

1. 确认接口参数前添加了[FromForm]特性，接收参数类型为对应模型的集合：

[HttpPost]
public IActionResult CreateSubProcess([FromForm] List<SubProcessModel> models)
{
    // 业务逻辑
}

// 模型定义示例
public class SubProcessModel
{
    public string Name { get; set; }
    public int Order { get; set; }
    public int ProcessID { get; set; }
}

2. 确认模型的属性名和前端传递的字段名大小写匹配，如果需要忽略大小写可以在Program.cs中配置全局序列化规则。

调试排查手段 #

• 打开浏览器开发者工具的「网络」面板，找到对应请求，查看请求载荷中的表单字段，确认格式和Postman中正常请求的格式完全一致。
• 后端可以先通过Request.Form查看所有接收到的键值对，确认前端传递的字段已经正确到达后端。

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