Лучший способ изменить изображение в асинхронном режиме [angular 4]?

Question

У меня есть проблема, которая была решена взломом, и я ищу лучший способ ее решить.

То, что я хочу сделать, это когда пользователь нажимает на input:file и выбирает изображение, оно должно отображаться на экране без загрузки (с помощью FileReader).

Проблема в том, что я не могу достичь почти ничего внутри метода загрузки файлов Filereaders (мне нужно достичь 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: любой) на общий класс FileItem, например: (inputValue: FileItem),

[2] Создайте константу, чтобы получить доступ к загруженному файлу, например: const file: File = item._file

Теперь вы можете получить доступ к таким файлам, как file.name, file.size и т. Д.

Надеюсь, это поможет.

ура