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

时间:2018-01-12 05:32:45

标签: html5 angular typescript filereader

希望有人可以教我一些新东西,我会尽量保持简短,因为我认为这只是一些无聊的细节我希望失踪......

我从这样的图像开始,其中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字符串,我看到currentImage var字符串更新到html绑定{{currentImage}}中的base64字符串,我看到{{ 1}}元素闪烁新更新的图像...但是它会立即恢复到最初分配给img的默认图像,即使currentImage仍然有新的base64字符串.... currentImage的最后console.log显示原始文件路径。

我不能为我的生活弄清楚为什么但是对于使用FileReader,Angular等的网络新手来说。所以希望有人可以快速为我提供一些简单的馅饼? :)

PS - 如果重要,那就是角度5

5 个答案:

答案 0 :(得分:1)

控制台日志中的

this.currentImage首先执行,reader中的console.log稍后执行。 你刚刚绑定了事件,然后告诉浏览器加载,同时浏览器加载图像并触发事件,最后一个console.log就已经执行了。

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

答案 1 :(得分:1)

您必须将(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

答案 2 :(得分:1)

(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***
 }

答案 3 :(得分:1)

(click)更改为(change)并使用以下代码段。

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

答案 4 :(得分:0)

所以我需要为睡眠不足的问题道歉。我遗漏了一个事实,即还涉及到一些高级图像处理,base64需要相应地进行交互,而且属性绑定不够快,无法赶上下一步。就我而言,你所有的答案都是正确的,我一开始就问这个问题。睡觉后,我发现罪魁祸首在一个不相关的区域很快就发现了罪魁祸首。非常感谢您节省时间,我很快就会删除这个问题。干杯!