如何将包含文件列表的模型提交到API，解决IFormFile反序列化报错

报错信息：Deserialization of interface types is not supported. Type 'Microsoft.AspNetCore.Http.IFormFile'

• 你虽然构造了FormData实例，但最终POST请求提交的还是原始的JSON格式model对象，ASP.NET Core的JSON序列化器无法反序列化IFormFile这类接口类型的属性，只有请求格式为multipart/form-data时，框架才会自动解析文件到IFormFile属性
• FormData字段构造逻辑错误，循环追加文件时用了重复的key，且字段名和后端模型属性名不匹配，导致参数绑定失败
• 冗余代码：new Blob([JSON.stringify({})], { type: 'application/json' });没有被赋值或使用，没有实际作用

前端修正后代码 #

submit(model: Model): Observable<any> {
  const fd = new FormData();
  // 追加其他业务字段，根据你实际的模型属性调整字段名
  fd.append('title', model.title);
  fd.append('amount', model.amount?.toString());
  // 追加多文件，key和后端模型的文件集合属性名保持一致
  for (let i = 0; i < model.files.length; i++) {
    fd.append(`files[${i}]`, model.files[i]);
  }
  // 提交FormData实例，不要传原始model，不需要手动设置Content-Type请求头
  return this.http.post(`${this.apiUrl}/API/Submit`, fd);
}

后端对应代码 #

接收模型定义 #

public class SubmitModel
{
    // 替换为你实际的业务字段
    public string Title { get; set; }
    public int Amount { get; set; }
    // 多文件集合属性
    public List<IFormFile> Files { get; set; }
}

接口方法定义 #

[ApiController]
[Route("API")]
public class ApiController : ControllerBase
{
    [HttpPost("Submit")]
    // 必须加[FromForm]特性，指定从表单数据绑定模型
    public IActionResult Submit([FromForm] SubmitModel model)
    {
        // 处理业务逻辑
        return Ok();
    }
}

• 不要手动给请求添加Content-Type: multipart/form-data请求头，浏览器会自动生成带边界标识的请求头，手动设置会导致边界缺失，框架无法解析表单数据
• 如果业务字段存在嵌套对象，比如模型里有Order类型的属性，下属OrderNo字段，FormData对应的key要写为order.orderNo，和后端模型层级保持对应即可正常绑定

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