【Angular】画像のアップロードとPreview表示について

【Angular】画像のアップロードとPreview表示について:

Angularでの開発を最近開始したのですが、ファイルアップロードのところでかなり詰まってしまったので、備忘録として残しておきます。

前提

・Twitterのようなアプリケーションを作成する

・その中に画像のアップロードとその画像の表示を行う

今回のゴール

・画像のアップロード

・アップロード画像の表示

詰まったとこ

・そもそも、アップロードどうやってやるのかわからない

まとめ

・Fileを扱う時にはFile Readerを用いる

・htmlのimgタグの中で表示させるためには、urlの形にする必要がある

・File Readerの中でurlを生成するためには、readAsDataUrlを用いる（これを用いることによって、readerのresultプロパティにurlの文字列が入る）

ソースコード

以下、新たなツイートをする部分のhtmlとtypescript

content-main.component.html

<div class="home-tweet-box tweet-box-component tweet-user"> 
    <input class="tweet-input" [(ngModel)]="newTweetContents" placeholder="いまどうしてる？"> 
    <button (click)="setTweetContents(newTweetContents)">ツイート</button> 
    <input type='file' accept="image/*" (change)="onChangeInput($event)"> 
</div> 
<img [src]=imageSrc alt="" /> 

content-main.component.ts

imageSrc = ''; 
reader = new FileReader(); 
 
onChangeInput(evt) { 
 const file = evt.target.files[0]; 
 this.reader.onload = ((e) => { 
   this.imageSrc = e.target['result']; 
 }); 
 this.reader.readAsDataURL(file); 
} 

最終的に参考にしたURL

https://stackoverflow.com/questions/38476315/angular2-file-input-onchange/38476440
https://developer.mozilla.org/ja/docs/Web/API/FileReader
https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsDataURL

お願い

もし、他にベストプラクティス（普通こうやってやるでしょ）がありましたら知りたいです。

よろしくお願いいたします。