Angular向C#后端提交多文件响应式表单报错排查与解决

我正尝试从Angular客户端应用发送一个包含两个数组的表单：一个数组存储基础对象，另一个存储文件。后端端点接收单个IFormFile时可正常工作，但发送该表单时出现如下错误：

[ERROR] NotSupportedException - 不支持接口类型的反序列化。类型“Microsoft.AspNetCore.Http.IFormFile”。路径: $.files[0].file | LineNumber: 0 | BytePositionInLine: 350

该错误由C#应用抛出。

相关模型定义如下：

public record CreateLessonPlanCommand(
    string PlanTitle,
    string PlanContent,
    LessonStageModel[] Stages,
    EducationFileModel[] Files
) : ICommand<Unit>;

public class LessonStageModel
{
    public int Order { get; set; }
    public string StageSource { get; set; }
    public string StageContent { get; set; }
}

public class EducationFileModel
{
    public IFormFile File { get; set; }
}

Angular响应式表单代码：

this.lessonPlanForm = this.formBuilder.group({
            planTitle: ['', [Validators.required]],
            planContent: ['', [Validators.required]],
            stages: this.formBuilder.array([], []),
            files: this.formBuilder.array([], [])
        });

处理文件表单组动态创建的方法：

files(): FormArray {
        return this.lessonPlanForm.get('files') as FormArray;
    }

    newFile(): FormGroup {
        return this.formBuilder.group({
            file: ['', [Validators.required]]
        });
    }

    addFile() {
        this.files().push(this.newFile());
    }

    removeFile(fileIndex: number) {
        this.files().removeAt(fileIndex);
    }

编辑补充：

控制器代码如下：

[HttpPost("plan")]
public async Task<ActionResult> CreateLessonPlan([FromBody] CreateLessonPlanCommand command)
{
    var result = await Sender.Send(command);
        
    return HandleResult(result);
}

将[FromBody]改为[FromForm]后错误仍存在。请问从Angular向C#发送含多文件的响应式表单的正确方式是什么？

核心问题 #

1. 接口类型反序列化失败：IFormFile是接口，ASP.NET Core无法直接反序列化接口类型到模型中，必须调整模型结构避免嵌套接口。
2. 数据格式不匹配：混合普通字段与文件的表单，不能用JSON格式（FromBody）传输，必须用multipart/form-data，但当前Angular代码未正确构建该格式的请求。
3. 模型绑定规则不符：即使改用FromForm，数组与嵌套对象的命名格式需符合ASP.NET Core的绑定要求。

具体解决步骤 #

步骤1：调整后端模型与控制器 #

• 简化模型结构，去掉嵌套的EducationFileModel，直接在命令中使用IFormFile[]（ASP.NET Core可直接绑定该类型数组）：

  public record CreateLessonPlanCommand(
      string PlanTitle,
      string PlanContent,
      LessonStageModel[] Stages,
      IFormFile[] Files
  ) : ICommand<Unit>;
  

• 确保控制器使用[FromForm]绑定参数：

  [HttpPost("plan")]
  public async Task<ActionResult> CreateLessonPlan([FromForm] CreateLessonPlanCommand command)
  {
      var result = await Sender.Send(command);
      return HandleResult(result);
  }
  

步骤2：修改Angular端提交逻辑 #

Angular响应式表单的form.value无法直接携带文件，必须手动构建FormData，并遵循ASP.NET Core的数组命名规则：

onSubmit() {
  if (this.lessonPlanForm.invalid) return;

  const formData = new FormData();

  // 添加普通字段
  formData.append('PlanTitle', this.lessonPlanForm.get('planTitle').value);
  formData.append('PlanContent', this.lessonPlanForm.get('planContent').value);

  // 添加Stages数组，格式为Stages[index].属性名
  const stages = this.lessonPlanForm.get('stages') as FormArray;
  stages.controls.forEach((stage, index) => {
    formData.append(`Stages[${index}].Order`, stage.get('order').value);
    formData.append(`Stages[${index}].StageSource`, stage.get('stageSource').value);
    formData.append(`Stages[${index}].StageContent`, stage.get('stageContent').value);
  });

  // 添加Files数组，格式为Files[index]
  const files = this.lessonPlanForm.get('files') as FormArray;
  files.controls.forEach((fileGroup, index) => {
    const file = fileGroup.get('file').value as File;
    formData.append(`Files[${index}]`, file, file.name);
  });

  // 发送请求，无需手动设置Content-Type，浏览器会自动处理边界标识
  this.http.post('/api/plan', formData).subscribe({
    next: (res) => console.log('提交成功'),
    error: (err) => console.error('提交失败', err)
  });
}

步骤3：对齐表单控件与后端属性名 #

确保Angular中stages数组的控件命名与后端LessonStageModel的属性名一致（大小写不敏感，但建议完全匹配避免问题）：

newStage(): FormGroup {
  return this.formBuilder.group({
    order: ['', Validators.required],
    stageSource: ['', Validators.required],
    stageContent: ['', Validators.required]
  });
}

常见误区排查 #

• 不要手动设置Content-Type为multipart/form-data，否则会丢失自动生成的边界标识，导致后端无法解析。
• 数组必须按照数组名[index].属性的格式添加到FormData，ASP.NET Core才能正确绑定到数组模型。
• 不能用JSON.stringify处理含文件的表单数据，文件只能通过FormData传递。

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