Angular传递含FormData的对象至.NET6 WebAPI时反序列化报错排查

报错核心原因 #

你当前是将包含FormData的自定义对象序列化为JSON格式发送给API，但.NET的JSON反序列化器不支持把JSON数据转换成IFormFile接口类型。

IFormFile是ASP.NET Core专门设计用来解析multipart/form-data（表单上传）格式请求中的文件内容的类型，它只能从表单格式的请求体中被正确解析，无法通过JSON反序列化生成——JSON本身也无法高效存储二进制文件内容，这就导致了反序列化失败，端点自然不会被触发。

而单独发送FormData时，请求的Content-Type是multipart/form-data，ASP.NET Core会自动按照表单规则解析文件为IFormFile，所以能正常触发端点。

解决方法 #

想要同时传递自定义业务数据和文件，需要把所有数据都打包到FormData中发送，而不是将FormData嵌套在自定义对象里转成JSON。

Angular端调整 #

将自定义对象的字段逐个追加到FormData中，再添加文件：

uploadProfilePicture(appImage: AppImage, file: File) {
  const formData = new FormData();
  // 追加自定义对象的字段（示例字段，根据你的AppImage类调整）
  formData.append('userId', appImage.userId);
  formData.append('imageName', appImage.imageName);
  // 追加文件
  formData.append('fileData', file);

  return this.http.post('/api/your-endpoint', formData);
}

.NET端调整 #

1. 保持你的ImageFile模型不变：

public class ImageFile
{
    public string UserId { get; set; }
    public string ImageName { get; set; }
    public IFormFile FileData { get; set; }
}

2. API端点添加[FromForm]标记，明确告知ASP.NET Core从表单数据中绑定模型：

[HttpPost("upload-profile")]
public IActionResult UploadProfilePicture([FromForm] ImageFile model)
{
    // 处理上传逻辑
    return Ok();
}

这样请求会以multipart/form-data格式发送，ASP.NET Core就能正确解析出所有字段和IFormFile对象，端点也能正常触发。

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