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

Question

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

我已经有了发送单个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似乎不能接受文件集合。

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

- Winthorpe

---

遍历您的文件数组并逐个添加。正如您所注意到的，append仅接受单个文件，但可以多次调用。 - Elias Soares

谢谢。我可以一个一个地做。我只是把它保持打开，以防有人能够建议一种发送多个文件的方法... - Winthorpe

请检查我的答案是否可行。 - Elias Soares

好的。[] 只用于 PHP，所以我不确定。 - Elias Soares

非常感谢您的帮助。那真的很有帮助。 :) - Winthorpe

Answer 1

您只需多次调用append方法即可：

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

无论是使用'files[]'还是'files'作为关键字，取决于解析请求体的服务器端平台。

- Elias Soares

---

只是一条注释：[] 后缀仅在 PHP 中必需。在 Asp.NET 中不需要。 - Elias Soares

如果您在后端收到一个类似这样的MultipartFile，如何遍历它？ - Yannick Mussche

取决于你的后端。大多数情况下，它们会将其转换为数组。 - Elias Soares

我无法使用Java捕获它，它无法获取MultipartFile[]。另外，为什么每次都要将“files []”附加到末尾，而不是执行foreach并只附加“file”？ - Yannick Mussche