月: 2020年3月

Nuxt.jsでFirebase Storageに画像アップロード・バリデーション・削除する方法をメモしておきます。 前提条件 Nuxt.jsとFirebase Storageの連携をします。firebase.jsにFirebaseとの繋ぎ込みの設定をしておきましょう。 ・firebase.js [crayon-67195ed1840a2310347037/] 画像ファイルのアップロード Firebase Storageに画像をアップロードするためのトリガを用意します。画像が選択されるとuploadメソッドが呼びされます。 今回はユーザが画像を投稿するという例で紹介していきます。 ・pages/user/images.vue [crayon-67195ed1840a5082988672/] uploadメソッドが呼びされると、選択したファイル情報を取得しfile変数に格納します。 次にfirebase.storage().ref()メソッドでFirebase Storageのどのパスにアップロードするかを指定します。今回はthis.idをユーザの一意のIDとし、その配下に格納することとします。 storageRef.put(file)で指定したパスに画像をアップロードします。 成功すると、getDownloadURL()メソッドでFirebase Storageにアップロードしたパスを取得し、自前のDBにそのパスと画像名を保存するため、userストアのuploadImageメソッドを呼び出します(userストアの処理は割愛。id・name・urlデータをAPIを通してDBに保存)。 ・pages/user/images.vue [crayon-67195ed1840a6006858464/] アップロードファイルのバリデーション 次にアップロードされるファイルに対して、バリデーションをかけていきます。 今回は以下の2つを条件にバリデーションをかけていきます。 アップロードされるファイルが画像であること 画像のサイズが10MB未満であること まずはmethods内にvalidationメソッドを作成します。 1つ目のif文では、アップロードされるファイルが画像かどうか判定します。file.type(ファイルタイプ)にimageが含まれている場合のみアップロード可能なファイルとします。 画像以外の場合は、validationErrorにエラーメッセージを格納します。 2つ目のif文では、アップロードされる画像のサイズが10MB未満かどうか判定します。file.size(ファイルサイズ)が最大サイズとして定義したmaxSize未満の場合のみアップロードします。 10MB以上の場合は1つ目と同様にエラーメッセージを格納します。 ・pages/user/images.vue [crayon-67195ed1840a8324145378/] uploadメソッドでバリデーションをかけ、エラーだった場合モーダルを表示し、処理を中断します (モーダルはsweetalert2を使用)。 ・pages/user/images.vue [crayon-67195ed1840ae322141513/] アップロード画像ファイルの削除 アップロードした画像を削除するためのトリガを用意します。 ・pages/user/images.vue [crayon-67195ed1840b0623836786/] 削除したい画像をクリックすると、確認ダイアログが表示されます。確認ダイアログで削除ボタンを押下すると、DBに保存されている画像のパスを削除します。 Firebase Storageにアップロードされている画像のパスをfirebase.storage().ref().child()メソッドで取得し、delete()で削除します。 ・pages/user/images.vue [crayon-67195ed1840b1952167664/] 以上、Nuxt.jsでFirebase Storageに画像アップロード・バリデーション・削除する方法でした。