【Angular】画像を読み込んで表示する

ファイルを選択して画像のプレビューを表示するサンプル

シンプルにinputボタン

<!-- 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);
  }
}

FileReaderについて…MDN web docs

inputボタン以外をクリックして選択ウィンドウを表示したいとき

Adivとか画像とか、input以外の要素をクリックしてウィンドウ表示させたいとき

<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) {
    //--- 変更なし ---
  }
}

ViewChildについて…【Angular】@ViewChild / @ViewChildren を理解する【v6.x】
inputは非表示にしつつ、ViewChildを使いts側からinputの操作をできるようにします。
ボタンにしたい要素をクリックした時に、inputに対しclick()を作動させてあげることで選択ウィンドウを開くことができます。