将文件输入 FileReader base64 结果动态分配给 IMG SRC答案

【问题标题】：Assigning File Input FileReader base64 result to IMG SRC dynamically将文件输入 FileReader base64 结果动态分配给 IMG SRC
【发布时间】：2018-01-12 05:32:44
【问题描述】：

希望有人能教我一些新的东西，我会尽量保持简短，因为我打赌这只是我希望错过的一些空洞的细节......

我从这样的图像开始，其中currentImage 是一个现有的图像路径，首先作为默认值；

<img src="{{currentImage}}">
<input type="file" (click)="onUpload($event)">

然后触发一个基本方法来获取 event.files 等；

onUpload(event) {

      const file: File = event.files[0],
          reader: FileReader = new FileReader(),
           that = this; // *** WORTH NOTING...

      reader.addEventListener('loadend', function () {
        console.log('the resulting base64 string = ', reader.result);
        that.currentImage = reader.result;
      }, false);

      if (file) {
        reader.readAsDataURL(file);
      }

      console.log('does the blob get updated to currentimage?',
                   this.currentImage); // THIS RETURNS THE OLD IMAGE PATH***

  }

这种工作，我在控制台看到我想要的base64字符串，我看到currentImagevar字符串更新到html绑定{{currentImage}}中的base64字符串，我看到img元素闪烁新更新的图像...但随后它立即恢复为最初分配给currentImage 的默认图像，即使currentImage 仍然具有新的base64 字符串...。this.currentImage 的最后一个console.log 显示原始文件路径。

我一生都想不通为什么，但我是使用 FileReader、Angular 等 Web 端的新手。所以希望有人可以快速为我提供一块不起眼的馅饼？ :)

PS - 如果重要的话，它是 5 角

【问题讨论】：

请看下面我的回答，这首先不是一个公平的问题。干杯！

标签： html angular typescript filereader

【解决方案1】：

控制台日志中的this.currentImage首先执行，reader中的console.log稍后执行。你只是绑定了事件然后告诉浏览器加载，同时浏览器加载图片并触发事件，最后的console.log应该已经执行了。

更多代码或现场示例将有助于找出图像在首次加载后消失的原因。

【讨论】：

hmmm，为什么img src没有更新？稍后当我有更多时间时，我可以整理一个更好的例子，尽管我现在被打败了，需要睡觉。我得到了操作部分的顺序，但也许我现在太困了，没有一个正常的大脑哈哈。

【解决方案2】：

您必须将(click) 更改为(change) 方法

html

<img src="{{currentImage}}">
<input type="file" (change)="onUpload($event)">

打字稿

currentImage = "";


public onUpload(event){
    let reader = new FileReader();
    reader.addEventListener("load", (ev)=>{
        this.currentImage  = ev.target['result']
    });
    reader.readAsDataURL(event.target.files[0]);
}

希望对你有帮助。

工作演示：https://stackblitz.com/edit/angular-z774jn?file=app%2Fapp.component.ts

【讨论】：

【解决方案3】：

将(click)事件绑定到html中的(change)替换

<img [src]="currentImage">
<input type="file" (change)="onUpload($event)">

并且在 ts 中通过 e 内部的 addEventListener 回调

 onUpload(e) {
    const file: File = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0],
    reader: FileReader = new FileReader(),
    that = this; // *** WORTH NOTING...
    reader.addEventListener('load', function (e) {
      console.log('the resulting base64 string = ', e.target.result);
      that.currentImage = e.target.result;
    }, false);
    if (file) {
      reader.readAsDataURL(file);
    }
    console.log('does the blob get updated to currentimage?',
    this.currentImage); // THIS RETURNS THE OLD IMAGE PATH***
 }

【讨论】：

【解决方案4】：

将(click)更改为(change)并使用以下代码sn-p。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
 currentImage ;
  onUpload(event) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (rdr) => {
        this.currentImage = reader.result;
      };
      reader.readAsDataURL(event.target.files[0])
    }
  }
}

WORKING DEMO

【讨论】：

【解决方案5】：

所以我需要为睡眠不足的问题道歉。我忽略了一个事实，即还涉及一些高级图像处理，base64 需要与之交互，并且属性绑定还不够快，无法赶上下一步。就我而言，您的所有答案都是正确的，而我一开始就问得不好。所以我是罪魁祸首，在睡了一会儿后，我很快就在一个不相关的区域找到了罪魁祸首。非常感谢您抽出宝贵时间，我会尽快删除问题。干杯！

【讨论】：