Angular 2上传多个文件答案

【问题标题】：Angular 2 upload multiple filesAngular 2上传多个文件
【发布时间】：2020-01-08 22:30:53
【问题描述】：

我尝试上传多个文件（PDF 或各种图像格式）。现在上传单个文件有效，但多个文件无效。

这是代码：

HTML：

<div>
    <label> Upload PDF(s) or Images (PNG/JPG/DICOM/DCM):</label>
    <div class="ctrl">
        <div class="icon">
            <i class="fa fa-file-image-o"></i>
        </div>
        <input type="file" (change)="onChange($event)"/>
        <md-input class="ctrl" [(ngModel)]="fileName"></md-input>
    </div>
</div>

脚本：

onChange(event: any) {
    this.fileName = event.srcElement.files[0].name;
}

帮助我如何上传多个文件。

【问题讨论】：

标签： html angular

【解决方案1】：

将multiple 属性添加到您的输入：

<input type="file" (change)="onChange($event)" multiple />

要在您的输入中显示所有文件名，请像下面这样：https://plnkr.co/edit/WvkNbwXpAkD14r417cYM?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input type="file" multiple (change)="onChange($event, showFileNames)" />
      <input #showFileNames />
    </div>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }

  onChange(event: any, input: any) {
    let files = [].slice.call(event.target.files);

    input.value = files.map(f => f.name).join(', ');
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

或者使用你的变量而不是直接把它放到那个输入中！

【讨论】：

正在显示，是的.. 因为您使用的是files[0].name .. 但正在上传？这就是问题，对吧？ :)
我正在尝试的是，我有一个文件上传选项。我可以在哪里上传一个或多个文件。当我单击添加按钮时，它必须发送上传的文件名。现在只显示新上传的文件名。
@mxii 如果我想使用 HTTP 上传它，我应该发送哪个值？
谁能告诉我上传多个文件的 angularJS 代码是什么？

【解决方案2】：

你可以试试这个对我有用；）

https://github.com/jkuri/ng2-uploader

【讨论】：

【解决方案3】：

初始化：

selectedFiles: File[];

文件选择事件：

onFileSelected(event) {
  this.selectedFiles = event.target.files;
  for (let i = 0; i < event.target.files; i++) {
    this.selectedFiles.push(event.target.files[i]);
  }
}

表单提交事件：

onSubmit() {
  const formData = new FormData();
  if (this.selectedFiles.length > 0) {
   for (const row of this.selectedFiles) {
     formData.append('document_files[]', row);
   }
  }
}

HTML 文件输入：

<input 
 type="file" 
 id="documents" 
 multiple
 formControlName="documents" 
 (change)="onFileSelected($event)"
 accept="image/*,.pdf,.doc,.docx,.xml">

【讨论】：