【Nuxt.js】Firestore Storageに画像アップロード・削除する方法

Nuxt.jsでFirestore Storageに画像アップロード・バリデーション・削除する方法をメモしておきます。

前提条件

Nuxt.jsとFirestore Storageの連携をします。firebase.jsにFirebaseとの繋ぎ込みの設定をしておきましょう。

・firebase.js

 

画像ファイルのアップロード

Firestore Storageに画像をアップロードするためのトリガを用意します。画像が選択されるとuploadメソッドが呼びされます。

今回はユーザが画像を投稿するという例で紹介していきます。

・pages/user/images.vue

 

uploadメソッドが呼びされると、選択したファイル情報を取得しfile変数に格納します。

次にfirebase.storage().ref()メソッドでFirestore Storageのどのパスにアップロードするかを指定します。今回はthis.idをユーザの一意のIDとし、その配下に格納することとします。

storageRef.put(file)で指定したパスに画像をアップロードします。

成功すると、getDownloadURL()メソッドでFirestore Storageにアップロードしたパスを取得し、自前のDBにそのパスと画像名を保存するため、userストアのuploadImageメソッドを呼び出します(userストアの処理は割愛。id・name・urlデータをAPIを通してDBに保存)。

・pages/user/images.vue

 

アップロードファイルのバリデーション

次にアップロードされるファイルに対して、バリデーションをかけていきます。

今回は以下の2つを条件にバリデーションをかけていきます。

  1. アップロードされるファイルが画像であること
  2. 画像のサイズが10MB未満であること

まずはmethods内にvalidationメソッドを作成します。

1つ目のif文では、アップロードされるファイルが画像かどうか判定します。file.type(ファイルタイプ)にimageが含まれている場合のみアップロード可能なファイルとします。

画像以外の場合は、validationErrorにエラーメッセージを格納します。

2つ目のif文では、アップロードされる画像のサイズが10MB未満かどうか判定します。file.size(ファイルサイズ)が最大サイズとして定義したmaxSize未満の場合のみアップロードします。

10MB以上の場合は1つ目と同様にエラーメッセージを格納します。

・pages/user/images.vue

 

uploadメソッドでバリデーションをかけ、エラーだった場合モーダルを表示し、処理を中断します (モーダルはsweetalert2を使用)。

・pages/user/images.vue

 

アップロード画像ファイルの削除

アップロードした画像を削除するためのトリガを用意します。

・pages/user/images.vue

 

削除したい画像をクリックすると、確認ダイアログが表示されます。確認ダイアログで削除ボタンを押下すると、DBに保存されている画像のパスを削除します。

Firestore Storageにアップロードされている画像のパスをfirebase.storage().ref().child()メソッドで取得し、delete()で削除します。

・pages/user/images.vue

以上、Nuxt.jsでFirestore Storageに画像アップロード・バリデーション・削除する方法でした。