如何从Angular 11向.NET 6 Web API传递含文件的对象数组

问题根源 #

.NET的[FromForm]模型绑定对数组/集合类型的FormData项有严格的命名规则，传递对象数组时，文件字段必须按[索引].FormFile的格式命名（和模型类的属性名对应），否则绑定器无法识别文件所属的对象索引，就会出现strProp有值但FormFile为null的情况。

Angular端正确构造FormData的方式 #

不能直接把对象数组整体塞入FormData，要逐个遍历数组，为每个对象的字段单独添加到FormData，严格遵循.NET的命名格式：

// 假设你的对象数组是 myObjArray: MyObj[]
const formData = new FormData();

myObjArray.forEach((obj, index) => {
  // 添加字符串属性，键名格式：[索引].strProp
  formData.append(`[${index}].strProp`, obj.strProp);
  // 添加文件，键名格式：[索引].FormFile（和.NET模型的属性名完全一致）
  if (obj.FormFile) {
    formData.append(`[${index}].FormFile`, obj.FormFile, obj.FormFile.name);
  }
});

// 发起请求时不要手动设置Content-Type，让浏览器自动处理multipart/form-data边界
this.http.post('/api/your-controller/upload', formData).subscribe(res => {
  // 处理响应
});

注意：

• 绝对不能用JSON.stringify序列化对象后添加到FormData，文件无法被序列化
• 不要手动设置Content-Type: multipart/form-data，否则会丢失自动生成的边界标识，导致.NET无法解析表单

.NET端的接收配置 #

确保模型类和控制器方法定义正确：

1. 模型类MyObj：

public class MyObj
{
    public string strProp { get; set; }
    public IFormFile FormFile { get; set; }
}

2. 控制器方法：

[HttpPost("upload")]
public IActionResult UploadObjects([FromForm] List<MyObj> myObjList)
{
    // 处理逻辑示例
    foreach (var obj in myObjList)
    {
        if (obj.FormFile != null)
        {
            // 处理文件存储等操作
        }
    }
    return Ok();
}

如果仍有问题，检查上传大小限制：
在Program.cs里配置允许的最大表单大小：

builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 104857600; // 设置为100MB，按需调整
});

验证步骤 #

1. Angular端构造FormData后，打印表单项确认格式：

for (let pair of formData.entries()) {
  console.log(`${pair[0]}: ${pair[1]}`);
}

要确保输出的键名是[0].strProp、[0].FormFile、[1].strProp、[1].FormFile这类格式。

2. .NET端可以通过Request.Form查看原始表单数据，确认文件项存在且键名正确。

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