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

【问题标题】：Better Way to Change Image src While being async [angular 4]?在异步 [angular 4] 时更改图像 src 的更好方法？
【发布时间】：2017-05-01 20:14:28
【问题描述】：

我有一个通过 hack 解决的问题，我正在寻找更好的方法来解决它。

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

问题是，我在 Filereaders onload 方法中几乎无法访问任何内容（我需要访问 this.image 来更改图像）遗憾的是我使用了

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

我的代码

html:

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

ts：

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);
}

【问题讨论】：

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

标签： javascript angular coding-style

【解决方案1】：

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

例如： [1]。将您的 (inputValue: any) 更改为通用 FileItem 类，例如： (inputValue: FileItem),

[2] 创建一个常量来访问上传的文件，例如：常量文件：File = item._file

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

希望对您有所帮助。

干杯

【讨论】：