Показать изображение перед нажатием, чтобы загрузить файл в формате Angular 9?

Question

У меня есть такой код в моем текущем angular проекте для загрузки файла:

<input #file type="file" accept='image/*'  (change)="Loadpreview(file.files) " />

Как я могу изменить это, чтобы он мог загружать, когда пользователь вместо этого нажимает на изображение?

Answer 1

Вы можете сделать это так:

component.ts

import { Component, VERSION } from "@angular/core";
import { SafeUrl, DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  constructor(private sanitizer: DomSanitizer) {}

  image: string | SafeUrl =
    "https://images.unsplash.com/photo-1521911528923-9c3838123490?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80";

  updateImage(ev) {
    this.image = this.sanitizer.bypassSecurityTrustUrl(
      window.URL.createObjectURL(ev.target.files[0])
    );
  }
}

component. html

<p>
    Image uploader :)
</p>
<img [src]="image"  (click)="selectImage.click()">
<input type="file" (change)="updateImage($event)" style="display: none" #selectImage>

По сути, вы вызываете обработчик кликов, ссылка на идентификатор входного элемента

Здесь вы можете найти рабочий пример вашей проблемы: https://stackblitz.com/edit/stackoverflow-62501330

Answer 2

в HTML:

<img src="image" alt=""  (click)="selectImage()">

в ts:

selectImage()
{
  let input = document.createElement('input');
  input.type = 'file';
  input.accept="image/*";
  input.click();
}