Angular：使用 FormArray 读取多个文件的文件阅读器答案

【问题标题】：Angular :File reader of multiple files with FormArrayAngular：使用 FormArray 读取多个文件的文件阅读器
【发布时间】：2021-03-30 02:24:28
【问题描述】：

我在从不同的输入上传多个图像时遇到问题，我有一个包含 formArray 的表单，以便在我按下“添加文件”按钮时推送新的输入

this.designForm = this.fb.group({
      newFiles: this.fb.array([
        this.fb.control(null,Validators.required)
      ],Validators.required)
    });
  get newFiles() {
    return this.designForm.get('newFiles') as FormArray;
  }
  addNewFiles() {
    this.newFiles.push(this.fb.control(null,Validators.required));
  }

按钮：<button type="button" (click)="addNewFiles()">Add new Document</button>

输入：

<div  *ngFor="let newFile of newFiles.controls; let i=index">
                    <input type="file" 
                    id="usecaseImage" 
                    (change)="showPreviewImage($event)"
                    [formControlName]="i">
                </div>

和事件方法：

showPreviewImage(event: any) {
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();
        reader.onload = (event: any) => {
          for(let i=0;i<this.newFiles.length;i++){
            console.log(this.newFiles.length);
            this.designForm.value.newFiles[i] = event.target.result; 
          }
        }
        reader.readAsDataURL(event.target.files[0]);   
    }
}

它适用于上传，但是当我尝试预览图像时，它只是从最后一个输入重复最后一个图像，所以如果我有 3 个带值的输入

input1 value-> X.JPG, input2 value-> Y.JPG and input3 value-> Z.JPG

它会预览 Z.JPG 3 次！

编辑：预览在另一个组件中，我从原始组件的服务中填充它： this.designForm = this.sdlcService.designForm ;

然后我循环获取我有多少个表单（我提交了多少次表单），另一个循环获取单个表单中的输入数量（上传了多少图像），使用键值管道提取值。

<div *ngFor="let form of designForm ;let d = index">
              <img [src]="input.value" *ngFor="let input of form | keyvalue;let s = index">
            </div>

我应该如何处理？

【问题讨论】：

预览html代码在哪里？

标签： angular typescript filereader formarray

【解决方案1】：

这是一个典型的解决方案（在 Angular 中）

模板

<button class="" (click)="uploader.click()">
      <input hidden type="file" multiple #uploader (change)="onFileInputChange($event)" />
</button>

attachments: File[] = [];
----------------------------
onFileInputChange($event: any) {
 if (!$event.target.files) {
   return;
 }
 Array.from($event.target.files).forEach((f: File) => {
   if (!this.attachments.find((i) => i.name === f.name)) {
    this.attachments.push(f);
   }
 });
}


async onSubmit() {
   if (!this.attachments.length) {
      return;
   }

   const attachments = await Promise.all(this.attachments.map(this.fileToDataURL));        
      // add any action you want, here you got an array of dataUri
 }



fileToDataURL(file_: File) {
    const reader = new FileReader();
    // tslint:disable-next-line:no-unused
    return new Promise((resolve, reject) => {
      reader.readAsDataURL(file_);
      reader.addEventListener(
        'load',
        function (event) {
          resolve(event.target.result);
        },
        false,
      );
    });
  }

【讨论】：