图片上传:角6

Question

我在图片上传方面有问题。有两个图像上传部分，在第一次上传它的工作很好。但当我上传在第二次上传图像时，只有在第一节更改。以下是代码详细信息：

<div class="upload">
  <div class="center_image">
    <div class="image-upload">
      <label for="file-input">
        <img *ngIf="!url1==true" src="/assets/images/upload.png">
        <img [src]="url1" height="60">
      </label>

      <input id="file-input" type="file" (change)="readUrl($event)" />
    </div>
    <h6 *ngIf="!url1==true" class="font_u">Upload Front</h6>
    <br>
    <div class="li_ol">
      <p>The following details must be clearly visible :</p>
      <ol>
        <li>Name</li>
        <li>Date of Birth
        </li>
        <li>Gender</li>
        <li> Aadhaar number
        </li>
        <li>Photograph</li>
      </ol>
    </div>
  </div>
</div>
<div class="upload">
  <div class="center_image">
    <div class="image-upload">
      <label for="file-input">
        <img *ngIf="!url2==true" src="/assets/images/upload.png">
        <img [src]="url2" height="60">
      </label>

      <input id="file-input" type="file" (change)="onSelectFileBack($event)" />
    </div>
    <h6 *ngIf="!url2==true" class="font_u">Upload Back</h6>
    <br>
    <div class="li_ol">
      <p>The following details must be clearly visible :</p>
      <ol>
        <li>Address</li>
        <li> Aadhaar number</li>
      </ol>
    </div>
  </div>
</div> 

Javascript:

readUrl(event: any) {
  alert(event);
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.url1 = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

onSelectFileBack(event: any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.url2 = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

在这两个上传图像只上传到第一部分，但div和偶数功能是不同的。

Answer 1

第一节中的文件输入：

   <input id="file-input" type="file" (change)="readUrl($event)" />

具有与第二节中的文件输入相同的id：

   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />

改变其中的一个，使它们每个都是独一无二的。

Answer 2

尝试使用与上面相同的代码创建stackblitz，它正在按预期工作。只有相应的输入字段更改事件被触发。

https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts

Answer 3

将单击事件添加到标签中。

<label for="file-input" (click)="onChoose()">

从输入标签中删除id=“文件输入”，并添加"#fileinput“模板变量。

<input #fileinput type="file" (change)="onSelectFileBack($event)" />    

在onChoose文件中创建component.ts方法。

@ViewChild('fileinput') fileInput : ElementRef; 
onChoose():void{
  this.fileInput.nativeElement.click();
}