firebase

【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得②

前置き

以前の記事を
役割で切り分けて
Vuex版にしたコードです。
【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得

この2つが
一緒になっていて
分かりにくかったので
切り分けてみました✂︎
・選択した画像を送信する
・url化してプレビューする

Vuexに移行する必要があるのは
送信と取得の部分です。


Step1: 送信するコードを考える

Vuexに移行する前のコード

選択した画像を
そのままstorageに
putすればOK🙆‍♀️

putするため
引数にFileを使用します💫

e.target.files
FileListオブジェクトは
配列のように管理されていて
0番目に画像データが入っています。
それをそのまま送信📤


Vuex移行後のコード


Step2: プレビューするコードを書き足す

Vuexに移行する必要がないので
付け足します✍️

画像を読み込み
Fileオブジェクトを
readAsDataURLでurlにします💫

readAsDataURLでの
読み込みが完了したら
onloadで結果を
postData.thumbnailに入れます。
MDN: FileReader.onload

storeの変更はありません。


Step3: 取得するコードを考える

これで完成です🎶👏

取得の場合は
firestorageで取得した画像を
getDownloadURL
url化できるので
それをそのままstateに入れます。

computed
urlをgettersで呼び出して
img srcにバインドさせればOKです✨


調整

見にくいので少しCSSを調整🎨


まとめ

役割を分けて
切り離すことができました✂︎

前回はonload
readAsDataURLの前に
書いていたため、
役割を分ける際に混乱しました😂

流れをしっかり理解するのは大切ですね。
コードは全てを理屈で理解しようとすると詰む
と言いますが、
理論的に分かるに越したことはないです😂


キャプチャの録画は
GIPHY Captureに
変更してみました💫

-firebase
-,

© 2024 aLiz Nuxt