Firebase 存储不是 vuejs 应用程序中的功能

Posted 2023-02-22

【中文标题】Firebase 存储不是 vuejs 应用程序中的功能

【英文标题】：Firebase Storage isn't a function, in vuejs app

【发布时间】：2020-10-24 18:54:21

【问题描述】：

开发人员好，我正在使用 Firebase 在 Vuejs 中构建这个应用程序，将一些视频和图像存储在 Firebase 的存储模块中，但是当我初始化检索图像的功能时，我收到了这个错误：“firebase__WEBPACK_IMPORTED_MODULE_2__.storage (...).ref(...).child(...).then 不是函数”

在我的 Vuex 方法中，我设置它是为了访问我的 firebase 存储中的图像

actions: 
    getVideoAboutMe(commit) 
      firebase
        .storage()
        .ref("myVideo")
        .child("coverr-a-greek-cemetery-top-view-1578925848736.mp4")
        .then(uploadTaskSnapshot => 
          commit("setVideoAboutMe", uploadTaskSnapshot);
          console.log(uploadTaskSnapshot);
          return uploadTaskSnapshot.ref.getDownloadURL();
        )

        .catch((error) => 
          alert("Error", error);

        );
    ,

而我的主js文件就是这样设计的：

import * as firebase from "firebase";
import "firebase/storage";

Vue.config.productionTip = false;
Vue.component("myAboutMe", aboutTag);

new Vue(
  router,
  store,
  vuetify,
  render: h => h(App),
  created() 
    firebase.initializeApp(
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    );
    this.$store.dispatch("getVideoAboutMe");
  
).$mount("#app");

然后创建组件上的所有逻辑，但错误完全是指 vuex 中的此方法，例如如果存储不存在（我假设它确实导致导入 firebase）。 关于如何改进这一点的任何建议？...谢谢！！！

【参考方案1】：

child() 不返回承诺，因此您不能在其上调用then()。它返回一个Reference 对象。如果您想获取该引用所引用对象的下载 URL，只需直接在其上调用 getDownloadURL()。它返回一个承诺。

      firebase
        .storage()
        .ref("myVideo")
        .child("coverr-a-greek-cemetery-top-view-1578925848736.mp4")
        .getDownloadURL()
        .then(...)
        .catch(...)

【讨论】：

非常感谢道格拉斯