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

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

// 1/14追記あり


前提

・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


お願い

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

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


追記

この内容について、NgFormで書き換えることをしました。

https://qiita.com/TakahitoNakashima/items/d1d6fa314d1619f0ce45