Angular 9“无法在'FileReader'上执行'readAsDataURL'：参数1的类型不是'Blob'。”

Question

当我尝试在上传图片之前显示所选图片时出现此问题

company.component.ts

handleFileInput(file: File){

    console.log(file);

    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = event => {
      this.imageUrl = event.target.result;
      console.log(this.imageUrl);
    };

  }

HTML

<input
  type="file"
  #fileInput
  (change)="handleFileInput(fileInput.files[0])"
/>

<img [src]="imageUrl" height="50px" alt="">

Answer 1

以下是如何实现的示例：

组件：

public imageUrl : SafeResourceUrl;

constructor(private sanitizer: DomSanitizer) { }

public upload(list: FileList): void {
  const urlToBlob = window.URL.createObjectURL(list.item(0)) 
  this.imageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(urlToBlob); 
}

模板：

<input type="file" (change)="upload($event.target.files)">

<img [src]="url">

Answer 2

尝试一下。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

constructor(
    private dtr: ChangeDetectorRef,
  ){
    
  }
handleFileInput(event) {

    if (event.target.files && event.target.files[0]) {

        this.imageFile = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);
        reader.onload = () => {
          this.url = reader.result;
              this.dtr.detectChanges();

        };
      } 

在HTML文件中。

 <input type="file" accept=".png, .jpg, .jpeg" (change)="handleFileInput($event)"> 

<img [src]="url">