Angular向ASP.NET Core Web API多文件上传Post请求异常排查

核心问题 #

你前端遍历this.supportDocuments的方式错误，导致添加到FormData的不是实际的Blob/File对象，而是对象的键名（字符串），后端自然无法解析成List<IFormFile>。

修正步骤 #

1. 修复前端FormData文件添加逻辑
   for...in循环遍历的是对象的属性名（如果是数组则是索引），不是实际的文件元素。你需要拿到对应位置的文件对象再添加到FormData：

如果this.supportDocuments是数组：

// 使用for...of遍历数组中的每个文件对象
for (const file of this.supportDocuments) {
  formData.append("files", file);
}

如果this.supportDocuments是键值对对象：

for (const key in this.supportDocuments) {
  if (this.supportDocuments.hasOwnProperty(key)) {
    const file = this.supportDocuments[key];
    formData.append("files", file);
  }
}

2. 确认请求头设置
   Angular的HttpClient在发送FormData时，会自动生成正确的multipart/form-data请求头（包含boundary），你当前仅添加CSRF Token的设置没问题，无需额外手动指定Content-Type。

验证后端代码 #

你的ASP.NET Core端点代码是正确的：

routeBuilder.MapPost("api/cancellationforms/upload", ([FromForm] List<IFormFile> files, [FromServices] IServiceManager serviceManager, CancellationToken cancellationToken) =>
{
    return Results.Ok("Hello");
})
.WithName("CreateCancellationFormUpload")
.WithOpenApi();

只要前端正确用同一个键名"files"多次添加文件，后端就能接收到完整的文件列表。

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