Angular 7如何从多个输入上传文件答案

【问题标题】：Angular 7 How to upload files from multiple inputsAngular 7如何从多个输入上传文件
【发布时间】：2019-11-30 03:29:54
【问题描述】：

我使用带有打字稿的 Angular 7，我的问题是：如何从 html 中的多个输入上传文件，如下所示：

<input type="file" (change)="handleFileInput($event.target.files)">
<input type="file" (change)="handleFileInput($event.target.files)">
<input type="file" (change)="handleFileInput($event.target.files)">

我知道多个但我不能使用它，因为我需要将每个文件的名称更改为 spring boot 应用程序中的枚举值

【问题讨论】：

好吧，你不要输入多个文件。您有一个具有多个属性的输入元素，以使用户能够上传多个文件。然后，您使用 FormData 附加选定的文件并使用 HttpClient 向服务器发出请求。
@Mateusz Sobczak 有理由不使用单个输入吗？
@LuisRico 因为我需要将每个文件的名称更改为 spring boot 应用程序中的枚举值
请看一下希望对你有帮助stackoverflow.com/questions/51587241/…
How to Upload multiple files in Angular 6 with ADDMORE button?的可能副本

标签： angular typescript

【解决方案1】：

使用单个输入，您仍然可以独立地重命名每个文件：

  onFileChange(files: FileList) {
     Array.from(files).forEach(file => {
       //ADD CODE TO RENAME THE FILE
      });
 }

【讨论】：

【解决方案2】：

您不必创建多个文件输入字段。一个就够了，您可以选择其中的多个文件进行上传。

<input type="file" name="img" multiple>

multiple 属性是一个布尔属性。当存在时，它指定允许用户在元素中输入多个值。要选择多个文件，请在选择时按住 CTRL 或 SHIFT 键。

【讨论】：

【解决方案3】：

创建一个输入字段并为其设置多个参数。

<input type="file" multiple>

【讨论】：