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

Question

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

我还尝试了Firebase文档中的所有其他方法，但都遇到了相同的错误。

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

火力基地.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);
});
},
},
};