Что не так с этим кодом для загрузки и немедленного отображения изображения в Angular?

Question

Это в profile.component. html

<label for="profile">Profile Photo</label>
<input type="file" [(ngModel)]='input'/>
<img [src]='input'>

Это в profile.component.ts

profilePhoto: File;

set input(temp: File) {
    this.profilePhoto = temp;
 }

get input() {
    return this.profilePhoto;
}

Answer 1

Во-первых, [(ngModel)] на входе файла фактически предоставляет строку, а не объект File здесь; set input(temp: File) { .. }.

Поскольку некоторые браузеры защищают путь к файлу, этот путь строки часто является виртуальным (например, C: \ fakepath \ image.png). Есть некоторые обходные пути, но они несовместимы между браузерами. Узнайте больше об этом здесь; Как определить C: \ fakepath?

В некоторых браузерах есть функция безопасности, которая не позволяет JavaScript узнать локальный полный путь вашего файла. Это имеет смысл - как клиент, вы не хотите, чтобы сервер знал файловую систему вашего локального компьютера. Было бы хорошо, если бы все браузеры делали это.

В вашем случае вы можете просто использовать FileReader для загрузки данных изображения для вашего элемента Image. Это процесс, аналогичный тому, который вы могли бы использовать, если хотите позже также загрузить данные файла.

const fReader = new FileReader();
fReader.readAsDataURL(this.profilePhoto);
fReader.onloadend = (event) => {
  this.profilePhotoImage = event.target.result;
}

Рабочий пример здесь; https://stackblitz.com/edit/angular-cfvlhn