【Nuxt.js+Firebase】FirebaseStorage에 이미지 업로드로 빠진 곳

Firebase를 사용하여 이미지를 사용하여 무언가를 만들려고 하면 Storage에 이미지를 업로드하는 기능을 구현하는 데 어려움을 겪습니다.

전제 조건

이미 Firebase에서 무언가 프로젝트를 만들고 있습니다.

오류

공식 사이트나, 이쪽 기사를 참고로, Firebase에 화상의 업로드를 시도했습니다만,

Firebase 공식 문서 "웹에서 스토리지 참조 만들기"

nuxt.js × firebase로 이미지 저장 처리를 구현했습니다.

【Nuxt.js】Firestore Storage에 이미지 업로드 및 삭제하는 방법

이런 오류가 나와 붙어

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_3___default.a.storage is not a function

원인

결론부터 말하면, 매우 부끄럽지만 Firebase에서 스토리지 설정을 하지 않았을 뿐이었습니다.

설정 방법

스토리지 설정 방법은 공식을 보면서 했습니다.
- Firebase 공식 문서 "웹에서 사용해보기"

설정에서 빠진 점

공식을 보면서 했습니다만, 여러가지 빠졌습니다.

보안 설정

보안은 아무것도 하지 않으면 「기본」설정입니다만, 그러면 통과하지 않기 때문에, 「공개」로 설정합니다.
다음 공식에 있는 코드를 Firebase 콘솔의 "Strage < Rules"에 복사하십시오.
htps : // 푹 빠져라. 오, ぇ. 이 m/도 cs/s 토레게/세쿠리 ty/s rt? 아우테세 r = 0 # 푸 b c

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
        });
    }
}