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

Question

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

public file : File;

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

<img [src]="file"> 

Answer 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">

---

这里有一个 工作示例 StackBlitz 供您参考。

Answer 2

根据MDN web docs，您可以致电

URL.createObjectURL()

。

调整@SiddAjmera的答案，我们可以这样做：

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

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

  onChange(event) {
    // business logic here...
    this.url = URL.createObjectURL(event.target.files[0])
  }
}