Nuxt.js のアプリから Firebase Storage へ画像をアップロードする方法

npm install --save firebase

import firebase from 'firebase/app'
import 'firebase/app'
import 'firebase/firestore'
import 'firebase/storage'

const config = {
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGEBUCKET,
}

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export default firebase

FIREBASE_PROJECT_ID='your-project-name'
FIREBASE_STORAGEBUCKET='gs://abcdefg-hijklmn.com'

<h2 class="title is-3 has-text-grey">新規投稿</h2>
<b-field label="タイトル">
  <b-input v-model="title" required></b-input>
</b-field>
<b-field label="メモ">
  <b-input rows="2" maxlength="100" type="textarea" v-model="memo"></b-input>
</b-field>

<b-field>
  <b-upload v-model="file" drag-drop required>
    <section class="section">
      <div class="content has-text-centered">
        <p>
          <b-icon icon="upload" size="is-large"> </b-icon>
        </p>
        <p>画像ファイルをドロップしてください。</p>
      </div>
    </section>
  </b-upload>
</b-field>
<div class="tags">
  <span class="tag is-primary" v-if="file">
    {{ file.name }}
    <button class="delete" type="button"
      @click="this.file = null"
    ></button>
  </span>
</div>
<b-button type="is-primary" outlined @click="create()">送信</b-button>

export default {
  data() {
    return {
      title: "",
      memo: "",
      file: null,
      type: "",
      dataUrl: "",
    };
  },
  methods: {
    create() {
      this.$store.dispatch("items/create", {
        title: this.title,
        memo: this.memo,
        file: { name: this.fileName, type: this.type, dataUrl: this.dataUrl },
      });
    },
  },
  watch: {
    file(val) {
      this.fileName = val.name;
      if (val.type == "image/jpeg") this.type = "jpeg";
      else if (val.type == "image/png") this.type = "png";
      else if (val.type == "image/gif") this.type = "gif";
      const reader = new FileReader();
      reader.readAsDataURL(this.file);
      reader.onload = (e) => {
        this.dataUrl = e.target.result;
      };
    },
  },
};

import firebase from '~/plugins/firebase'
import { firestoreAction } from 'vuexfire'

const db = firebase.firestore()
const itemsRef = db.collection('items')

export const actions = {
  create: firestoreAction((context, input) => {
   // Storage にアップロード
   const storageRef = firebase.storage().ref();
   const fileUrl = `pictures/${input.file.name}.${input.file.type}`;
   const picturesRef = storageRef.child(fileUrl);
   picturesRef.putString(input.file.dataUrl, 'data_url').then(() => {
     // Firestore に保存
      itemsRef.add({
        title: input.title,
        memo: input.memo,
        fileUrl: fileUrl,
        created: firebase.firestore.FieldValue.serverTimestamp()
      }).then(() => {
       $nuxt.$router.push('/')
     });
    });
  }),

<div class="columns is-mobile">
  <div class="card" v-for="item in items" :key="item.id">
    <header class="card-header">
      <p class="card-header-title has-text-grey">
        {{ item.title }}
      </p>
    </header>
    <div class="card-content">
      <img :src="setImageUrl(item.fileUrl)">
    </div>
    <footer class="card-footer">
      <div class="card-footer-item">
        <span>{{ item.memo }}</span>
      </div>
    </footer>
  </div>
</div>

import firebase from '~/plugins/firebase'

export default {
  data() {
    return {
      items: [],
      images: [],
    }
  },
  async created() {
    // 投稿の取得
    this.$store.dispatch("items/init");
    this.items = this.$store.getters['items/dbItems']
    // 画像
    const storageRef = firebase.storage().ref().child('pictures');
    const list = await storageRef.listAll();
    list.items.forEach(item => {
      item.getDownloadURL().then(url => {
        this.images.push({path: item.fullPath, url: url});
      })
    })
  },
  methods: {
    setImageUrl(url) {
      const index = this.images.findIndex(image => image.path == url)
      if (index >= 0) {
        return this.images[index].url;
      }
    }
  }
};

import firebase from '~/plugins/firebase'
import { firestoreAction } from 'vuexfire'

const db = firebase.firestore()
const itemsRef = db.collection('items')

export const state = () => ({
  items: []
})

export const getters = {
  dbItems(state) {
    return state.items;
  },
}

export const actions = {
  init: firestoreAction(({ bindFirestoreRef }) => {
		bindFirestoreRef('items', itemsRef.orderBy('created', 'desc'));
  }),