(備忘)FirebaseのStorageに画像を投げる

index.vue

<template>
  <div>
    画像:
    <img v-show="uploadedImage" :src="uploadedImage">
    <input type="file" accept="image/png,image/jpeg" v-on:change="getFile"><br>
    <button v-on:click="getFile">ストレージへアップロード</button>
  </div>
</template>

<script>
import firebase from "@/plugins/firebase";

export default {
  data() {
    return {
      uploadedImage: '',
      file: null
    }
  },
  methods: {
    uploadFileToStorage: function() {
      var storageRef = firebase.storage().ref(this.file.name);
      storageRef.put(this.file.name).then(function() {
          console.log("image uploaded");
      });
    },
    getFile: function(e) {
      const files = e.target.files || e.dataTransfer.files;
      this.file = files[0];
    }
  }
}
</script>

firebase側の設定

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

参考

• https://firebase.google.com/docs/storage/web/upload-files?authuser=0
• https://qiita.com/komatzz/items/f2a25db16aca388845d3