Nuxt.jsでFirebase Storageに画像アップロード・バリデーション・削除する方法をメモしておきます。
前提条件
Nuxt.jsとFirebase Storageの連携をします。firebase.jsにFirebaseとの繋ぎ込みの設定をしておきましょう。
・firebase.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import firebase from 'firebase' if (!firebase.apps.length) { firebase.initializeApp({ apiKey: '<apiKey>', authDomain: '<authDomain>', databaseURL: '<databaseURL>', projectId: '<storageBucket>', storageBucket: '<storageBucket>', messagingSenderId: '<messagingSenderId>', appId: '<appId>' }) } export default firebase |
画像ファイルのアップロード
Firebase Storageに画像をアップロードするためのトリガを用意します。画像が選択されるとuploadメソッドが呼びされます。
今回はユーザが画像を投稿するという例で紹介していきます。
・pages/user/images.vue
1 2 3 | <label class="postImage-appendBtn"> <input @change="upload" type="file" data-label="画像の添付"> </label> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ... methods: { upload (p) { const file = p.target.files[0] const storageRef = firebase.storage().ref('users/' + this.id + '/images/' + file.name) // 画像をStorageにアップロード storageRef.put(file).then(() => { // アップロードした画像のURLを取得 firebase.storage().ref(users/' + this.id + '/images/' + file.name).getDownloadURL().then((url) => { // アップロードした画像のURLと画像名をDBに保存 this.$store.dispatch('user/uploadImage', { id: this.id, name: file.name, url: url }) }).catch((error) => { console.log(error) }) }) } } ... |
アップロードファイルのバリデーション
次にアップロードされるファイルに対して、バリデーションをかけていきます。
今回は以下の2つを条件にバリデーションをかけていきます。
- アップロードされるファイルが画像であること
- 画像のサイズが10MB未満であること
まずはmethods内にvalidationメソッドを作成します。
1つ目のif文では、アップロードされるファイルが画像かどうか判定します。file.type(ファイルタイプ)にimageが含まれている場合のみアップロード可能なファイルとします。
画像以外の場合は、validationErrorにエラーメッセージを格納します。
2つ目のif文では、アップロードされる画像のサイズが10MB未満かどうか判定します。file.size(ファイルサイズ)が最大サイズとして定義したmaxSize未満の場合のみアップロードします。
10MB以上の場合は1つ目と同様にエラーメッセージを格納します。
・pages/user/images.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ... data () { return { maxSize: 10000000, // 10MB validationError: '' } }, methods: { validation (file) { // 1. アップロードされるファイルが画像であること if (!(file.type.includes('image'))) { this.validationError = '画像ファイルのみアップロード可能です' return true } // 2. 画像のサイズが10MB未満であること if (!(parseInt(file.size) < this.maxSize)) { this.validationError = this.maxSize + 'byte未満のファイルのみアップロード可能です' return true } return false } }, ... |
uploadメソッドでバリデーションをかけ、エラーだった場合モーダルを表示し、処理を中断します (モーダルはsweetalert2を使用)。
・pages/user/images.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | ... methods: { upload (p) { ... // バリデート if (this.validation(file)) { this.$swal({ icon: 'error', title: this.validationError, }) return } ... }, } ... |
アップロード画像ファイルの削除
アップロードした画像を削除するためのトリガを用意します。
・pages/user/images.vue
1 2 3 4 5 6 7 8 9 | ... <li v-for="(image, index) in images" :key="index" > <p @click="delete(image)" role="button"> この画像を削除 </p> </li> ... |
削除したい画像をクリックすると、確認ダイアログが表示されます。確認ダイアログで削除ボタンを押下すると、DBに保存されている画像のパスを削除します。
Firebase Storageにアップロードされている画像のパスをfirebase.storage().ref().child()メソッドで取得し、delete()で削除します。
・pages/user/images.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | ... methods: { delete (p) { this.$swal({ title: '画像を削除します。よろしいでしょうか？', text: 'この操作は取り消しできません。', type: 'warning', showCancelButton: true, confirmButtonText: '削除', cancelButtonText: 'キャンセル', dangerMode: true }) .then((result) => { // 削除ボタン押下時 if (result.value) { // DBに保存されている画像削除 this.$store.dispatch('user/deleteImage', { id: p.id }).then(() => { const desertRef = firebase.storage().ref().child('users/' + this.id + '/images/' + p.image) // Firebase Storageに保存されている画像削除 desertRef.delete().then(() => { location.reload() }).catch((error) => { console.log(error) }) }) } }) } } ... |
以上、Nuxt.jsでFirebase Storageに画像アップロード・バリデーション・削除する方法でした。