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/>

两人都得到相同的图像。

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

Answer 2

编辑：似乎您在引用相同的URL variable和相同的方法selectFile。因此，尝试更改为其他变量和方法

示例

在您的html中添加此

<img [src]="imageUrl" />

<input type="file" accept="image/*" (change)="preview(file.files)"/>

然后在您的组件中

 public imageUrl

    public preview(files) {
        let reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = _event => {
            this.imageUrl = reader.result;
        };
    }

如何设置文件上传预览？

2 个答案: