希望有人可以教我一些新东西,我会尽量保持简短,因为我认为这只是一些无聊的细节我希望失踪......
我从这样的图像开始,其中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
答案 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需要相应地进行交互,而且属性绑定不够快,无法赶上下一步。就我而言,你所有的答案都是正确的,我一开始就问这个问题。睡觉后,我发现罪魁祸首在一个不相关的区域很快就发现了罪魁祸首。非常感谢您节省时间,我很快就会删除这个问题。干杯!