Firebase 存储 getDownloadURL 不断返回未定义的错误

Question

我正在尝试显示我的 Vue/Quasar 项目中的图像，该图像存储在 Firebase 存储中。我遵循了文档中的每一步。每次我使用 getDownloadURL() 方法时，我都会收到此错误“无法读取未定义的属性 'getdownloadURL'”。有人知道为什么我的代码不起作用吗？

我也尝试了 Firebase 文档中的所有其他方法，但我得到了同样的错误。

storage.refFromURL('gs://bucket/images/stars.jpg')

Firebase.js 文件

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/storage";

const firebaseApp = firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
});

const db = firebaseApp.firestore();
const storage = firebase.storage();
const ref = storage.ref("03.png");

export { db, storage, Ref };

我的vue组件文件

import ref from "@/firebase.js";
import storage from "@/firebase.js";
import db from "@/firebase.js";

export default {
  name: "Home",
  components: {
    CreateCharacter,
  },
  date() {
    return {
      img: "",
    };
  },
  created() {
    console.log(Ref);
    console.log(storage);
    console.log(db);
  },
  methods: {
    handle() {
      Ref.getdownloadURL().then((url) => {
        console.log(url);
      });
    },
  },
};

Answer 1

外壳很重要。大写和小写被认为是不同的。 ref 和 getDownloadURL.

此外，您的 import 可能需要一些工作。

我认为它应该是这样的：

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/storage";

const firebaseApp = firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
});

const db = firebaseApp.firestore();
const storage = firebase.storage();
const ref = storage.ref("03.png");

export { db, storage, ref }; // *** changed, needs to match casing of `const`

并且：

import { db, storage, ref } from "@/firebase.js"; // *** changed, destructure object 
                                                  // *** rather than using multiple imports

export default {
  name: "Home",
  components: {
    CreateCharacter,
  },
  date() {
    return {
      img: "",
    };
  },
  created() {
    console.log(ref); // *** changed, fix casing
    console.log(storage);
    console.log(db);
  },
  methods: {
    handle() {
      ref.getDownloadURL().then((url) => { // *** changed, fix casing
        console.log(url);
      });
    },
  },
};

Firebase 存储 getDownloadURL 不断返回未定义的错误

Firebase storage getDownloadURL keeps returning error of undefined

javascript

firebase

vue.js

firebase-storage

vuejs2