VueJS结合vue-dropzone与Firebase图片上传报错：storage不是函数

这个错误的核心原因很明确：你在组件里导入的firebase对象，实际上是Firestore数据库的实例，而不是Firebase的核心SDK对象，自然没有storage()方法。

问题出在你的Firebase初始化文件 #

看你的firebaseInit.js代码，最后一行导出的是firebaseApp.firestore()——也就是Firestore的实例，而不是整个Firebase SDK或者Storage实例：

// 原来的代码：最后导出的是Firestore实例
export default firebaseApp.firestore();

当你在组件里import firebase from "../../../config/firebaseInit"时，firebase变量指向的是Firestore实例，调用firebase.storage()当然会报错。

解决方案：调整初始化文件的导出内容 #

修改你的firebaseInit.js，改为导出Firebase核心对象，或者同时导出Firestore和Storage实例，方便组件按需使用：

方案1：导出整个Firebase核心对象（推荐，方便后续扩展其他服务）

import firebase from "firebase";
import "firebase/storage";
import firebaseConfig from "./firebaseConfig";

// 初始化应用
const firebaseApp = firebase.initializeApp(firebaseConfig);

// 导出整个Firebase SDK，同时额外导出常用实例方便直接使用
export const db = firebaseApp.firestore();
export const storage = firebase.storage();
export default firebase;

方案2：仅导出需要的实例（更轻量化）

import firebase from "firebase";
import "firebase/storage";
import firebaseConfig from "./firebaseConfig";

const firebaseApp = firebase.initializeApp(firebaseConfig);

// 直接导出Firestore和Storage实例
export const db = firebaseApp.firestore();
export const storage = firebase.storage();

调整组件中的代码 #

根据你选择的导出方案，修改组件里的导入和调用逻辑：

如果用方案1（导出整个Firebase）

组件里的导入可以保留，调用时可以选择更简洁的实例调用：

import firebase from "../../../config/firebaseInit";
// 也可以同时导入方便直接用的实例
import { db, storage } from "../../../config/firebaseInit";

// 保存列表的方法用db（更简洁）
saveListing() {
  db.collection("listings")
    .add({ /* 你的数据 */ })
    // ...后续代码不变
}

// 上传图片的方法直接用storage
async afterComplete(upload) {
  try {
    let file = upload;
    var metadata = { contentType: "image/png" };
    var imageRef = storage.ref(`images/${imageName}.png`);
    await imageRef.put(file, metadata);
    var downloadURL = await imageRef.getDownloadURL();
    this.images.push({ src: downloadURL });
  } catch (error) {
    console.log(error);
  }
  this.$refs.imgDropZone.removeFile(upload);
}

如果用方案2（仅导出实例）

组件里按需导入即可：

import { db, storage } from "../../../config/firebaseInit";

// 保存列表用db
saveListing() {
  db.collection("listings")
    .add({ /* 你的数据 */ })
    // ...后续代码不变
}

// 上传图片用storage
async afterComplete(upload) {
  try {
    let file = upload;
    var metadata = { contentType: "image/png" };
    var imageRef = storage.ref(`images/${imageName}.png`);
    await imageRef.put(file, metadata);
    var downloadURL = await imageRef.getDownloadURL();
    this.images.push({ src: downloadURL });
  } catch (error) {
    console.log(error);
  }
  this.$refs.imgDropZone.removeFile(upload);
}

这样调整后，就能正确调用Firebase Storage的方法，不会再出现那个类型错误了。

内容的提问来源于stack exchange，提问作者Joe Early