Как просмотреть изображение, сохраненное в поддельном пути в Angular 2/Typescript?

Браузеры не берут полный путь локального диска, вместо этого они объединяют имя файла с помощью fakepath. Есть ли способ получить доступ к файлу (изображению) из fakepath с помощью typescript или angular 2?

У меня есть это:

<img src="{{path}}" />

где моя переменная пути хранит "fakepath": "C:\fakepath\pic.jpg" в моем файле .ts.

Edit В этом обсуждается способ предварительного просмотра файла изображения из fakepath с использованием javascript. Если это возможно с Js, то это не то же самое в случае ts?

Ответы

Ответ 1

Это должно делать то, что вы хотите:

<input type='file' (change)="readUrl($event)">
<img [src]="url">

readUrl(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event:any) => {
      this.url = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

Ответ 2

Добавив к @GünterZöchbauer ответ, это не работало для меня, пока я не добавил это:

reader.onload = function(e:any){
   this.url = e.target.result;
}

До добавления "any" я получал ошибку:

property 'result' does not exist on type 'eventtarget'

Ответ 3

Он работает, когда вы меняете событие на любой. Таким образом, Angular может получить доступ к любому свойству.

readUrl(event) {
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();

  reader.onload = (event:any) => {
    this.url = event.target.result;
  }

  reader.readAsDataURL(event.target.files[0]);
}

}