以角度上传后立即显示上传的图像答案

【问题标题】：Show uploaded image immediately after upload in angular以角度上传后立即显示上传的图像
【发布时间】：2021-03-31 14:39:50
【问题描述】：

我试图在使用 angular 输入文件上传后立即显示上传的图像。

我试图从打字稿文件中获取 url 以在 html 文件中显示它：

<img src={{url}}>

我有这样的文件：
html:

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

ts：

  onFileChanged(event) {
    this.selectedFile = event.target.files[0]
    console.log(this.selectedFile)
  }

如何获取图像并立即显示？

【问题讨论】：

立即是什么意思？你的代码不工作吗？

标签： angular typescript

【解决方案1】：

onFileChanged(event) {
    const files = event.target.files;
    if (files.length === 0)
        return;

    const mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
        this.message = "Only images are supported.";
        return;
    }

    const reader = new FileReader();
    this.imagePath = files;
    reader.readAsDataURL(files[0]); 
    reader.onload = (_event) => { 
        this.url = reader.result; 
    }
}

【讨论】：

【解决方案2】：

 onFileChanged(e) {
    let reader = new FileReader();
    if(event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.url = reader.result; 
      };
    }
  }

【讨论】：