【Nuxt.js + Firebase】FirebaseStorageへの画像アップロードでハマったところ

Firebaseを使って画像を使った何かを作ろうとして、Storageへ画像をアップロードする機能を実装するのにハマった点をつらつらと書きます。

##前提条件
すでにFirebaseで何かプロジェクトを作ってること。

##エラー
公式サイトや、こちら記事を参考に、Firebaseに画像のアップロードを試みましたが、

• Firebase公式ドキュメント「ウェブでストレージ参照を作成する」
• [nuxt.js × firebase で画像保存処理実装してみた]
  (https://qiita.com/teratadokoro810/items/7c7ba55cc7fa7ad62e98)
• 【Nuxt.js】Firestore Storageに画像アップロード・削除する方法

こんなエラーが出て立ち往生

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_3___default.a.storage is not a function

##原因 結論からいいますと、とても恥ずかしいのですが、Firebaseでストレージの設定をしてないだけでした。
##設定方法

ストレージの設定方法は公式を見ながらやりました。

• Firebase公式ドキュメント「ウェブで使ってみる」

##設定でハマった点

公式を見ながらやりましたが、色々とハマりました。

###セキュリティ設定
セキュリティは何もしなければ「デフォルト」設定なのですが、それでは通らないので、「公開」で設定します。
以下の公式にあるコードを Firebaseコンソールの「Strage < Rules」にコピペしてください。
https://firebase.google.com/docs/storage/security/start?authuser=0#public

###config設定

const config = {
  apiKey: "YOUR_APIKEY",
  authDomain: "YOUR_AUTHDOMAIN",
  databaseURL: "YOUR_DATABASEURL",
  projectId: "YOUR_PROJECTID",
  storageBucket: "YOUR_STORAGEBUCKET",
  messagingSenderId: "YOUR_MESSENGINGSENDERID",
  appId: "YOUR_APPID",
  measurementId: "YOUR_MEASUREMENTID"
  };

このstorageBucketで、ややハマりました。

storageBucketは、
Firebaseのコンソールの Storage >　Files　の　gsから始まるURLです。
（以下画像）

で、私がハマったのが、
storageBucket: "abcdef1234.appspot.com"
としたため。

正解は
storageBucket: "gs://abcdef1234.appspot.com"

gs:// が入ります。

 

import

そして、importを追加すること

import 'firebase/storage';

import 'firebase';　だけではダメのようです。

こちらの記事に助けられました。
TypeError: _firebase2.default.storage is not a function

ありがとうございました。

コード

※アップロードするところを抜粋

index.vue

methods: {
    post(pic){
        const file = pic.target.files[0];
        const storageRef = firebase.storage().ref(file.name)
        //Firebaseストレージに保存
        storageRef.put(file);
        //保存先のURL
        picurl = "gs://"storageRef.location.bucket +"/"+storageRef.location.path_
        //FirestoreにURLを保存 　保存はされるが、もっといいやり方があると思う。
        const setAda = docRef.set({
            picurl: picurl
        });
    }
}