Javascript 在异步时更改图像src的更好方法[angular 4]？

我有一个问题是由黑客解决的，我正在寻找一个更好的方法来解决它

我想做的是当用户单击input:file并选择一个图像时，它应该显示在屏幕上，而不需要上传（使用FileReader）

问题是，我在Filereaders onload方法中几乎找不到任何东西（我需要找到this.image来更改图像）

let el = <HTMLImageElement>document.querySelector(".veik");
el.src = this.result;`

let el=document.querySelector（“.veik”）；
el.src=此结果`

我的代码

html:

ts:

onChange（$event）{
this.readThis（$event）；
}
ReadThis（inputValue:any）：void{
var file:file=inputValue.target.files[0]；
var myReader:FileReader=newfilereader（）；
myReader.onload=函数（e）{
设el=document.querySelector（“.veik”）；
el.src=此结果；
};
myReader.readAsDataURL（文件）；
}

也许您可以尝试使用FileItem类型来访问临时文件

例如： [1]. 将（inputValue:any）更改为通用FileItem类，如： （inputValue:FileItem）

[2] 创建一个常量以访问上载的文件，如： 常量文件：文件=项。\u文件

现在您可以访问file.name、file.size等内容

希望有帮助

---

Cheers

在Angular中执行此操作的方法是将图像源绑定到组件的属性，然后在

onload

中设置该值。

<input type="file" name="test" id="file" (change)="onChange($event)">

onChange($event){
    this.readThis($event);
}

ReadThis(inputValue: any) : void {
    var file:File = inputValue.target.files[0];
    var myReader:FileReader = new FileReader();

    myReader.onload = function(e){
      let el = <HTMLImageElement>document.querySelector(".veik");
      el.src = this.result;
    };

    myReader.readAsDataURL(file);
}