将文件对象转换为 <img> Angular答案

【问题标题】：Convert File Object to <img> Angular将文件对象转换为 <img> Angular
【发布时间】：2019-06-06 13:54:25
【问题描述】：

在一个 Angular 组件中，我有一个像这样的文件和一个图像：

public file : File;

如何在 HTML 模板上显示图像，如下所示：

<img [src]="file">

【问题讨论】：

你的文件是图片吗？
是的，它是@artemArkhipov

标签： javascript angular typescript file

【解决方案1】：

使用FileReader's 实例的readAsDataURL 方法并将File 传递给它。它有一个onload 属性，您可以为其分配一个处理函数。一旦输入文件被读取，这将使用event 调用。事件的 target.result 属性将具有一个编码的 URI，然后您可以将其用作图像源。

这就是它转换为代码的方式

在您的组件类中：

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

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

  onChange(event) {
    var reader = new FileReader();

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

    reader.onerror = (event: any) => {
      console.log("File could not be read: " + event.target.error.code);
    };

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

  }

}

在模板中：

<input type="file" (change)="onChange($event)">

<img *ngIf="url" [src]="url">

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

这是最简洁、易于理解的答案。谢谢