如何在 ionic 3 中上传之前预览图像？

Question

我正在尝试使用 jquery 上传和预览图像。但得到这个

错误

Property 'result' does not exist on type 'EventTarget'.
reader.onload = function (e) {
 $('#blah').attr('src', e.target.result);
}

页面.ts

function readURL(input) {

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

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}


$('#file').on('change', function () {
  readURL(this);
});

页面.html

 <label for="file" class="lbl"><i class="fa fa-plus-circle"></i> &nbsp; Add Attachment</label>
<input type="file" id="file" style="visibility: hidden">
<img src="#" id="blah">

解决办法是什么？我认为这段代码是正确的，但问题在于“结果”属性。提前致谢

Answer 1

前段时间，我使用以下代码在 Ionic 中预览图像。

在 HTML 中：

<input type="file" value="" (change)="fileChange($event)">
<img *ngIf="img1" [src]="img1"/>

在 JavaScript 中：

fileChange(event) {
  if (event.target.files && event.target.files[0]) {
    let reader = new FileReader();
    reader.onload = (event:any) => {
      this.img1 = event.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);  // to trigger onload
  }
  
  let fileList: FileList = event.target.files;  
  let file: File = fileList[0];
  console.log(file);
}

欢迎改进