如何将包含文件的对象数组从 angular 传递到 .Net web api答案

【问题标题】：How to Pass an array of objects that contains file from angular to .Net web api如何将包含文件的对象数组从 angular 传递到 .Net web api
【发布时间】：2022-12-15 18:38:35
【问题描述】：

我正在使用：Angular 11、.Net 6

我有一个包含 2 个属性的对象。字符串和文件

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

在角度方面，我发送了一个 MyObj 对象列表：

const formData = new FormData();
formData.append('MyArr[0][strProp]', 'str0');
formData.append('MyArr[0][FormFile]', file0ToUpload, file0Name);
formData.append('MyArr[1][strProp]', 'str1');
formData.append('MyArr[1][FormFile]', file1ToUpload, file1Name);
_http.post<boolean>('https://...../MyMethod', formData)

在 .Net web api 控制器中，我试图从客户端获取数据：

[HttpPost]
[Route("MyMethod")]
public Task<IActionResult> MyMethod([FromForm] List<MyObj> MyArr){
....
return Ok();
}

我得到一个包含 2 个项目的列表，strProp 包含数据，但 FormFile 为空

如果我传递对象而不是对象数组，它工作正常，并且 FormFile 包含文件

如何将包含文件的对象数组从客户端发送到服务器？

【问题讨论】：

标签： .net angular file webapi

【解决方案1】：

我没有发送一个对象数组，而是发送了 2 个数组

第一个数组包含文件

第二个数组包含其他数据+文件名

在服务器端，我使用文件名将第一个数组中的文件组合到第二个数组中的对象

所以它看起来像：

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

在角度方面，我发送了一个 MyObj 对象列表：

const formData = new FormData();
formData.append('MyArr[0][strProp]', 'str0');
formData.append('MyArr[0][fileName]', 'file0Name');
formData.append('MyArr[1][strProp]', 'str1');
formData.append('MyArr[1][fileName]', 'file1Name');
formData.append('files', file0ToUpload, 'file0Name');
formData.append('files', file1ToUpload, 'file1Name');
_http.post<boolean>('https://...../MyMethod', formData)

在 .Net web api 控制器中，我从客户端获取数据，并组合 2 个数组：

[HttpPost]
[Route("MyMethod")]
public Task<IActionResult> MyMethod([FromForm] List<MyObj> MyArr, [FromForm] List<IFormFile> files){
  ....
  //merge 2 arrays using file-name that exists in 2 arrays 
  return Ok();
}

【讨论】：