Angular 以角度预览选定图像

我需要在angular 6中预览选定的文件。所以我使用了下面的代码。但也有一些错误。以下是我的实现：

export class AppComponent {
  title = 'imgpreview';

  url = '';
  onSelectFile(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;
      }
    }
  }
}

我得到的错误是：

错误是src/app/app.component.ts（19,33）中的错误：错误TS2339:类型“EventTarget”上不存在属性“result”

---

如何解决此问题？

指定事件类型如下：

reader.onload = (event: any) => { ... }

尝试一下：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'imgpreview';

  url = '';
  onSelectFile(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: any) => { // called once readAsDataURL is completed
        console.log(event);
        this.url = event.target.result;
      }
    }
  }
}

---

---

下面是一个参考文件。

指定事件类型如下：

reader.onload = (event: any) => { ... }

尝试一下：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'imgpreview';

  url = '';
  onSelectFile(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: any) => { // called once readAsDataURL is completed
        console.log(event);
        this.url = event.target.result;
      }
    }
  }
}

---

这是给你的裁判的一封信