Angular загрузка и предварительный просмотр нескольких изображений - PullRequest
Новая
       35

Angular загрузка и предварительный просмотр нескольких изображений

0 голосов
/ 28 апреля 2020

Я хочу загрузить и просмотреть несколько изображений при создании нового объекта в моем приложении angular, загрузка работает только для одного изображения, как исправить мой код, чтобы он мог загружать несколько файлов! 

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

  }

Я определил на входе и 4 превью, я не могу понять, почему не работает множественная загрузка, несмотря на то, что работает с одним изображением

...