Javascript 角度上传和预览多个图像

我想上传和预览多个图像时，在我的angular应用程序上创建一个新的对象，上传工作只为一个图像，如何修复我的代码，让它上传多个文件

---

我已经定义了输入和4个预览，我不明白为什么它不能工作的多重上传

---

尽管只处理一张图片

你可能会在答案中找到一些想法。你没有说是预览还是上传不起作用，也没有确切说明“不起作用”是什么意思。如果你的问题是上传，也许你可以添加你的代码来上传？希望这会有帮助：你可以在答案中找到想法。你没有说是预览还是上传不起作用，也没有确切地说你所说的“不起作用”。如果您的问题是上传，也许您可以添加进行上传的代码？希望这会有所帮助：

  <div class="row flex-row justify-content-centerr">
            <div class="col-md-3 mt-2 btn radius btn-secondary inputbtn1" (click)="triggerInput1()">
              <input #file1 type="file" accept='image/png, image/jpeg, image/jpg' id="file1"
                (change)="setImage1(file1.files)" multiple/>
              <label>
                <i class="la la-plus-square"> {{'plaintes.nouvelle.photos' | translate}} </i>
              </label>
              <label for="file1" style="display: none">
                <i class="la la-plus-square"> {{'plaintes.nouvelle.photos' | translate}} </i>
              </label>
            </div>



          </div>
          <div class="row flex-row justify-content-centerr">
            <div class="col-md-3 mt-2" *ngIf="imgURL1">
              <figure class="img-hover-01">
                <img [src]="imgURL1" class="img-fluid" alt="..." height="150">
                <div>
                  <a [href]="imgURL1" data-lity="" data-lity-desc="..." height="150"></a>
                  <a href="javascript:;"><i class="la la-trash-o" (click)="resetInput1()"></i></a>
                </div>
              </figure>
            </div>
            <div class="col-md-3 mt-2" *ngIf="imgURL2">
              <figure class="img-hover-01">
                <img [src]="imgURL2" class="img-fluid" alt="..." height="150">
                <div>
                  <a [href]="imgURL2" data-lity="" data-lity-desc="..." height="150"></a>
                  <a (click)="resetInput2()" href="javascript:;"><i class="la la-trash-o"></i></a>
                </div>
              </figure>
            </div>
            <div class="col-md-3 mt-2" *ngIf="imgURL3">
              <figure class="img-hover-01">
                <img [src]="imgURL3" class="img-fluid" alt="..." height="150">
                <div>
                  <a [href]="imgURL3" data-lity="" data-lity-desc="..." height="150"></a>
                  <a (click)="resetInput3()" href="javascript:;"><i class="la la-trash-o"></i></a>
                </div>
              </figure>
            </div>
            <div class="col-md-3 mt-2" *ngIf="imgURL4">
              <figure class="img-hover-01">
                <img [src]="imgURL4" class="img-fluid" alt="..." height="150">
                <div>
                  <a [href]="imgURL4" data-lity="" data-lity-desc="..." height="150"></a>
                  <a (click)="resetInput4()" href="javascript:;"><i class="la la-trash-o"></i></a>
                </div>
              </figure>
            </div>
          </div>

  triggerInput1() {
    $('#file1').click();
  }


  setImage1(files) {
    this.fileToUpload1 = files.item(0);
    const reader = new FileReader();
    reader.readAsDataURL(files[0]);
    reader.onload = _event => {
      this.imgURL1 = reader.result;
    };
    this.fileToUpload2 = files.item(1);
    const readerr = new FileReader();
    readerr.readAsDataURL(files[1]);
    readerr.onload = _event => {
      this.imgURL2 = readerr.result;
    };
    this.fileToUpload2 = files.item(2);
    const readerrr = new FileReader();
    readerrr.readAsDataURL(files[2]);
    readerrr.onload = _event => {
      this.imgURL3 = readerrr.result;
    };
    this.fileToUpload2 = files.item(3);
    const readerrrr = new FileReader();
    readerrrr.readAsDataURL(files[3]);
    readerrrr.onload = _event => {
      this.imgURL4 = readerrrr.result;
    };

  }