Angular 7将多个文件发送到服务器

Question

我对将Angular 7应用程序中的File集合发送到.NET Core 3服务器有疑问。

我具有用于将单个File发送到服务器的功能代码。但是，当我尝试发送File-File[]的集合时遇到了问题。这是控制器操作：

[HttpPost]
public async Task<IActionResult> Upload([FromForm(Name = "files")] List<IFormFile> files)
{
      // implementation...
{

我发送的FormData与我用来向服务器发送单个文件的代码一致：

const formData = new FormData();
formData.append('files', this.files);

这会导致编译器出错（请参见屏幕截图）：

FormData无法处理File[]的集合。

如果要更改同一代码以处理一个文件，例如，通过选择集合中的第一个元素，则文件将成功发送到服务器。像这样：

const formData = new FormData();
formData.append('files', this.files[0]);

请求是这样发送的：

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Disposition' : 'multipart/form-data' }),
};

  postPhotos(model: FormData): Observable<any | ErrorReportViewModel> {
    return this.http.post('api/Photograph', model, httpOptions)
    .pipe(
      catchError(error => this.httpErrorHandlerService.handleHttpError(error)));
  }

我还尝试使用模型发送请求正文中的文件。这不起作用：服务器收到Null的IFormFile集合。我的研究表明，发送FormData是必经之路。但是FormData似乎不接受文件的集合。

如何将文件集合发送到服务器？

Answer 1

您只需要多次调用append方法：

const formData = new FormData();
this.files.forEach((file) => { formData.append('files[]', file); });

密钥是必须是'files[]'还是仅仅是'files'取决于解析主体的服务器端平台。