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

Question

我有一个关于将 Angular 7 应用程序的集合发送File到 .NET Core 3 服务器的问题。

File我有用于向服务器发送单个数据的功能代码。File但是当我尝试发送- ie:的集合时，我遇到了问题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'解析主体的服务器端平台。