Question

HTML：

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

调用更改事件的函数

selectFiles(event) {
  const reader = new FileReader();

  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    reader.readAsDataURL(file);

    reader.onload = () => {
      this.myModel.get('propertyName').setValue({
        fileName: file.name,
        fileContent: reader.result
      });
    };
  }
}

这给了我一个选定的文件，如何在一个请求中获得多个文件内容？

Answer 1

由于您正在使用数组解构（const [file] = event.target.files），因此只能读取event.target.files中的第一个文件。相反，只需使用event.target.files数组本身，然后使用FormData上传所有文件。

component.html：

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

component.ts：

private files: File[];

constructor(/* ... */, private backend: MyBackendService) {
  /* ... */
}

public selectFiles(event: Event): void {
  if (event.target.files && event.target.files.length) {
    this.files = event.target.files;
  }
}

// call this when you're done filling your form, usually on (ngSubmit)
public submitForm(): void {
  this.backend.uploadFiles(this.files);
}

backend.service.ts

constructor(private http: HttpClient) {
    /* ... */
}

uploadFiles(files: File[]): void {
    const formData = new FormData();
    files.forEach((file) => formData.append(/* your field's name */, file));
    this.http.post</* your response type */>(/* your API endpoint URL */, formData).subscribe(/* handle response */);
}

有关更多信息，请阅读this gist。

Typescript：如何在一个请求上上传多张图片？

1 个答案: