Angular7 向服务器发送多个文件

Question

我有一个关于将 File 的集合从 Angular 7 应用程序发送到 .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好像不接受Files的集合。

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

Answer 1

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

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

密钥必须是 'files[]' 还是可以只是 'files' 取决于解析正文的服务器端平台。

Angular7 向服务器发送多个文件

Angular 7 send multiple files to the server

angular7

asp.net-core-3.0