Question

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

我想要做的是当用户点击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);
}

Answer 1

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

例如： [1]。将您的（inputValue：any）更改为通用的FileItem类，如：（inputValue：FileItem），

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

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

希望有所帮助。

干杯

更好的方法来改变图像src同时异步[角4]？

1 个答案: