Angular 10结合.NET Core 5 嵌套对象关联多文件上传方案咨询

核心思路 #

采用FormData混合传递结构化文本数据和二进制文件，通过数组索引后缀标记每个学生对应的文件字段，后端直接通过模型绑定自动匹配关联关系。

前端实现（Angular端） #

替换原有直接提交JSON的逻辑，将Classroom实例的字段按索引结构拼接为FormData：

// service.ts 提交方法
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Classroom } from './你的模型文件路径';

submitClassroom(classroom: Classroom): Observable<any> {
  const formData = new FormData();
  // 提交班级基础字段
  formData.append('Id', classroom.Id?.toString() ?? '0');
  formData.append('Name', classroom.Name);
  // 遍历学生数组，带索引提交每个学生的字段和对应图片
  classroom.Students.forEach((student, index) => {
    formData.append(`Students[${index}].Name`, student.Name);
    formData.append(`Students[${index}].Age`, student.Age.toString());
    formData.append(`Students[${index}].Sex`, student.Sex);
    formData.append(`Students[${index}].Image`, student.Image);
  });
  // 直接提交FormData，不要手动设置Content-Type请求头
  return this.http.post(`${this.apiUrl}/ControllerPath`, formData, { responseType: 'json' });
}

后端实现（.NET 5端） #

第一步：定义接收模型 #

// Dto定义
public class ClassroomDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<StudentDto> Students { get; set; } = new List<StudentDto>();
}

public class StudentDto
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Sex { get; set; }
    public IFormFile Image { get; set; }
}

第二步：编写接收接口 #

[ApiController]
[Route("api/[controller]")]
public class ClassroomController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Post([FromForm] ClassroomDto classroom)
    {
        // 此处classroom的每个Student属性的Image已经和对应的文件自动绑定
        foreach (var student in classroom.Students)
        {
            if (student.Image == null || student.Image.Length <= 0) continue;
            // 示例：保存文件到本地
            var savePath = Path.Combine("你的文件存储目录", $"{student.Name}_{Guid.NewGuid()}_{student.Image.FileName}");
            await using var stream = new FileStream(savePath, FileMode.Create);
            await student.Image.CopyToAsync(stream);
        }
        return Ok("提交成功");
    }
}

注意事项 #

• 前端提交时不要手动添加Content-Type: multipart/form-data请求头，浏览器会自动生成带边界标识的合法请求头，手动设置会导致后端解析失败
• 后端接口参数必须加[FromForm]特性，否则ASP.NET Core会默认尝试从请求体解析JSON，无法匹配FormData内容
• 学生字段的索引必须从0开始连续递增，不可跳号，否则后端会丢失对应索引的学生数据

原报错原因说明 #

你之前直接将包含File对象的Classroom实例作为JSON提交，.NET默认的System.Text.Json序列化器无法处理IFormFile类型自带的Headers属性（属于集合类型，默认没有序列化支持），因此抛出NotSupportedException异常，改用FormData提交即可完全规避该问题。 #

内容的提问来源于stack exchange，提问作者Ali.Rashidi