firebase

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

前置き

input type="file"
選択した画像をFirebase Cloud Storage
送信&取得をしていきます🌸

⬇️firebaseのプロジェクト作成などは
 こちらをご覧ください👀
 Databaseではなく
 Storageを使っています💫
【Nuxt.js】firebase導入編(RDB版):データの追加 取得をしよう

公式: Cloud Storage

参考:
FirebaseStorageの使い方・Singleを使って実装する。
Vue/Vuex/Nuxtのformでinput type='file'を指定するとv-modelが使えない
firebase Storageへのファイル保存
File APIとFileReader APIの利用


firebaseを使う前に

input type="file"でv-modelは使えない

Nuxtのテンプレートでは
inputv-modelを使う、
とイメージする方が多いと思います💡

しかしv-modelは
type="input"
type="file"のサポートをしておりません🌀


@changeを使う

v-modelの代わりに
@changeを使用します。

submitの前に、
@changeで
選択した画像の
Fileオブジェクトを
確認しています👀

e.target.files[0]
選択ファイルを配列形式で取得
まぁ画像のタイトルとかの情報が
入ってるものです💫

eventのtargetには「files」というプロパティが用意されています。これは「FileList」という複数ファイルを管理するオブジェクトが設定されています。このFileListでは、配列のようにファイルが管理されているのです。

http://libro.tuyano.com/index3?id=384001&page=2

firebaseの確認

put()メソッドで送信

送信にはput()メソッドを使います。
引数にはFileまたはBlobインスタンスを
指定する必要があるようです。
Upload from a Blob or File

今回はFileオブジェクトの読み込みをする
FileReader APIを使用します。
APIといっても
元から使用できるので
axiosを使う必要はありません💫☝️

submitのコードイメージは
こんな感じですね。
ということで
次のFileReader
詳しく見ていきましょう💡


FileReaderの確認

new FileReader()
fileを実際に読み込みます

readAsDataURL
fileをURLデータに変換する

onload
読み込みが成功、完了

result
読み込み結果

inputに入れた画像を表示させる

取得と送信用の画像データを
分かりやすくするために
新しくdata postData thumbnailを作成。
FileReaderを使って
画像情報を表示させています。
readAsDataURL
送信用のURLデータに変換しています。


FileReader + firebase

送信

送信時に起きたエラー

とりあえずchildとか使わずに
firebase.storage().ref()
putした時のエラー。

Error

FirebaseError: Firebase Storage: The operation 'put' cannot be performed on a root reference, create a non-root reference using child, such as .child('file.png'). (storage/invalid-root-operation)

翻訳

FirebaseError:Firebase Storage:操作 'put'はルート参照に対して実行できません。.child( 'file.png')などの子を使用して非ルート参照を作成してください。 (ストレージ/無効なルート操作)

ということで
非ルート参照にする必要があるようです。


取得

Download Data via URL

getDownloadURL()を使用します。


まとめ

firebaseは公式ガイドをしっかり見れば
基礎的なことはできてきます🎈🧸
まだよく分からないという方は
こちらの記事で慣れましょう🌟
Firebase Realtime Database
Cloud Firestore

余談ですがQiitaの他に
GitHubでTSのコードを
参考にしました。
TS独自の書き方に慣れたいです💭
TSできれば無駄なチェックが不要になるし…

変数の後ろのびっくりマーク❗️の意味を知りました💡
TypeScriptの変数の末尾の"!"(エクスクラメーション/感嘆符)の意味

-firebase
-,

© 2021 aLiz Nuxt