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

问题描述

我在从不同的输入上传多张图片时遇到问题，我有一个包含 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>

我该如何处理？

解决方法

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

模板

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

ts

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,);
    });
  }