Angular 8 两张图片输入显示预览

Question

我有两个上传图片的输入，我想显示这两个的预览，其中一个输入可以正常工作！

<div class="col-md-2 mb-3">
              <label for="">Icon</label>
              <input style="display: none" type="file" (change)="onIconChanged($event)" #fileInput>
              <div class="card-img-top"
                [style.background]="displayIcon ? 'url(' + displayIcon + ')' : 'url(http://via.placeholder.com/100x100)'"
                style="width: 100px;height: 100px;"></div>
              <button type="button" class="buupload" (click)="fileInput.click()">Upload</button>
            </div>
            <div class="col-md-8 mb-3">
              <label for="">Banner</label>
              <input style="display: none" type="file" (change)="onBannerChanged($event)" #fileInput>
              <div class="card-img-top"
                [style.background]="displayBanner ? 'url(' + displayBanner + ')' : 'url(http://via.placeholder.com/550x100)'"
                style="width: 550px;height: 100px;"></div>
              <button type="button" class="buupload" (click)="fileInput.click()">Upload</button>
            </div>

** ts **

onIconChanged(event) {
    this.selectedIcon = event.target.files[0]
    if (event.target.files && event.target.files[0]) {
      const file = event.target.files[0];

      const reader = new FileReader();
      reader.onload = e => this.displayIcon = reader.result;

      reader.readAsDataURL(file);
    }
  }

  onBannerChanged(event) {
    this.selectedBanner = event.target.files[1]
    if (event.target.files && event.target.files[1]) {
      const file = event.target.files[1];
      const reader = new FileReader();
      reader.onload = e => this.displayBanner = reader.result;

      reader.readAsDataURL(file);
    }
  }

横幅输入的显示不起作用，它总是出现在第一个输入预览（图标）上！！

Answer 1

请更改第二个输入参考并重试。

 <div class="col-md-8 mb-3">
              <label for="">Banner</label>
              <input style="display: none" type="file" (change)="onBannerChanged($event)" #secondFileInput>
              <div class="card-img-top"
                [style.background]="displayBanner ? 'url(' + displayBanner + ')' : 'url(http://via.placeholder.com/550x100)'"
                style="width: 550px;height: 100px;"></div>
              <button type="button" class="buupload" (click)="secondFileInput.click()">Upload</button>
            </div>

Angular 8 两张图片输入显示预览

Angular 8 Display preview of two image input

html

upload

image

file

angular