FileReaderは、自分の写真やギャラリーにアクセスしてその画像を取得することができるオブジェクトで、最近のアプリを作るのに必ずと言っていいほど必要になります。
今日は、そんなFileReaderを使い始めた人の目線で説明していきます。
まずは、コードの全貌から。。。
PhotoSelect(e) {
const file = e.target.files[0];
const fr = new FileReader();
fr.onload = () => {
const imgNode = this.refs.image; imgNode.src = fr.result;
};
fr.readAsDataURL(file);
}
上記のスクショがデバイスで画像をアップロードするコードのひな型になります。表示するだけならこれだけです。
まず、PhotoSelectでイベントハンドラを作ります。
その後にconst fileにてアップロードする画像の配列の大きさを決めています。target.files[0]なので、ここでは配列を一つと決めています。
その後に、const fr = new FileReader();でオブジェクトを生成します。
そして、onload関数で画像を取得しています。ちなみにリサイズや向きの変更もこの関数内で行います。
最後のreadDataURLでアップロードするファイルを決めてアップロードをします。
短めですが、これでテンプレートの説明は終わりです。
このままではスマホで撮った画像がそのままアップロードされるので、実用性はあまりありません。
しかし、onload内でプラグインを使ったりキャンバスオブジェクトを使ってjpgやpngを操作したりと自由にカスタマイズができるので
慣れてしまえばすぐに実装できてしまったりします。
しかし、reactのバージョンなどで使い方が変更されている、或いは使えなくなったプラグインも存在するので最初は結構苦労するかもしれないです。
やはり本実装の前に自分が開発しているnpmやreactのバージョンを確認をしてみるといいかもですね。
