【Angular】 화상을 읽어서 표시한다

간단하게 입력 버튼

<!-- html -->
<div class="upload">
    <input type="file" accept="image/*" 
           (change)="onChangeFileInput($event)">
    <img [src]="imgSrc" alt="">
</div>

import { Component, OnInit } from '@angular/core';

export class ImageUploadComponent implements OnInit {

  file: File = null;
  imgSrc: string | ArrayBuffer = "";

  constructor() { }

  ngOnInit() {}

  onChangeFileInput(event) {

    //fileが選択されていなければリセット
    if (event.target.files.length === 0) {
      this.file = null;
      this.imgSrc = "";
      return;
    }

    //ファイルの情報をfileとimgSrcに保存
    let reader = new FileReader();
    this.file = event.target.files[0];
    reader.onload = () => {
      this.imgSrc = reader.result;
    }
    reader.readAsDataURL(this.file);
  }
}

입력 버튼 이외를 클릭하여 선택 창을 표시하고 싶을 때

<div class="upload">
    <input 
      type="file"
      style="display: none;" <-追加
      #fileInput  <-追加
      accept="image/*"
      (change)="onChangeFileInput($event)"
    >
    <div class="div-upload" (click)="onClickFileInputButton()">アップロード</div> <-追加
    <img [src]="imgSrc" alt="">
</div>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

export class ImageUploadComponent implements OnInit {

  @ViewChild("fileInput", { static: false }) fileInput: ElementRef; //追加
  file: File = null;
  imgSrc: string | ArrayBuffer = "";

  constructor() { }

  ngOnInit() {}

  onClickFileInputButton(): void { //追加
    this.fileInput.nativeElement.click();
  }

  onChangeFileInput(event) {
    //--- 変更なし ---
  }
}