angular - 如何设置文件上传预览？

Question

我尝试为多个部分设置文件上传预览的代码，但是一旦我为一个部分选择文件，我就会为所有其他部分获得相同的图像预览......这里的帮助 https://stackblitz.com/edit/angular-ryk3jg?file =src%2Fapp%2Fapp.component.html（我的代码）

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

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;

      }
  this.selectedfiles = event.target.files;
  }

}

我的html代码

      <div class="form-inline" style="color: black">
  <div class="row">
  <div class="col-md-6 offset-md-3">
    <label style ="color: black">Upload ID Front</label>
    <form >
    <div class="form-group" >
        <img [src]="url" height="200"> <br/>
    <input type="file" (change)="selectFile($event)"  />
  </div>
    </form>
  </div>
  </div>
   &nbsp; &nbsp;
   <button (click)="uploadIDfront()" class="btn btn-primary" type="submit" style="margin:0 35%;position:relative;left:-35px;background-color: #3560a5;  /* blue */">Upload</button>
</div>
<br/>

  <div class="form-inline" Style="color: black">
  <div class="row">
      <div class="col-md-6 offset-md-3">
    <label style ="color: black">UPload ID Back</label>
    <form >
  <div class="form-group" >
      <img [src]="url" height="200"> <br/>
    <input type="file" (change)="selectFile($event)" />
  </div>
    </form>
    </div>
  </div>
   &nbsp; &nbsp;
   <button (click)="uploadIDback()" class="btn btn-primary"  style="margin:0 35%;position:relative;left:-35px;background-color: #3560a5;  /* blue */">Upload</button>
  </div>
  <br/>

两者都得到相同的图像..

标签： angular

Answer 1

我有一个预览图像的演示，你可以使用它

HTML

<input #Image type="file" (change)="handleFileInput($event.target.files)"/>
<img *ngIf="imageUrl" [src]="imageUrl" class="image">

TS

export class AppComponent {
  name = 'Angular';
  fileToUpload: any;
  imageUrl: any;
  handleFileInput(file: FileList) {
    this.fileToUpload = file.item(0);

    //Show image preview
    let reader = new FileReader();
    reader.onload = (event: any) => {
      this.imageUrl = event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload);
  }
}

https://stackblitz.com/edit/angular-preview-image-upload?file=src/app/app.component.html

更新

您仅在事件中使用更改名称事件更新您的代码onload。

您使用具有不同范围的相同事件变量。

<img #image height="200"> <br/>

 reader.onload = (event1: any, image) => { // called once readAsDataURL is completed
        //this.url = event1.target.result;
        //image.src = event1.target.result;
       event.target.parentElement.children[0].src = event1.target.result;
 }

您的代码已更新

https://stackblitz.com/edit/angular-hkiddt