firebase 存储 ref 不是函数

Question

我是网络开发新手。在过去的 24 小时内，我试图在整个互联网上找到答案，但没有成功，现在我在这里伸出援手

这是我的错误：

未捕获的类型错误：firebase__WEBPACK_IMPORTED_MODULE_3_.storage.ref 不是函数

这是 firebase.js 文件：

import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';


const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

const app = initializeApp(firebaseConfig);

export const storage = getStorage(app);

我正在像这样导入组件中的存储：

import {storage} from "../../firebase";

这是上传功能：

    const upload = (items) => {
    items.forEach((item) => {
        const fileName = new Date().getTime() + item.label + item.file.name;
        const uploadTask = storage.ref(`/items/${fileName}`).put(item.file);
        uploadTask.on(
            "state_changed",
            (snapshot) => {
                const progress =
                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log("Upload is " + progress + "% done");
            },
            (error) => {
                console.log(error);
            },
            () => {
                uploadTask.snapshot.ref.getDownloadURL().then((url) => {
                    setMovie((prev) => {
                        return { ...prev, [item.label]: url };
                    });
                    setUploaded((prev) => prev + 1);
                });
            }
        );
    });
};

有什么建议吗？

Answer 1

您正在将旧版命名空间 Firebase JS SDK（v8 及更早版本）的语法与更新的模块化 Firebase SDK（v9 及更高版本）一起使用。

您需要使用ref(storage, path)，而不是storage.ref()：

import { storage } from "../../firebase"
import { ref, uploadBytes } from "firebase/storage";

const upload = (items) => {
  items.forEach((item, index) => {
    const storageRef = ref(storage, `/items/${fileName}`);
    const uploadTask = uploadBytes(storageRef, item.file);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress =
          Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 1000)/10;
        console.log(`Upload #${index+1} is ${progress}% done`);
      },
      (error) => {
        console.log(error);
      },
      () => {
        console.log(`Upload #${index+1} is complete, fetching URL...`);
        getDownloadURL(storageRef)
          .then((url) => {
            console.log(`Upload #${index+1} is now available at ${url}.`);
            setMovie((prev) => {
              return { ...prev, [item.label]: url };
            });
            setUploaded((prev) => prev + 1);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    );
  });
}

我鼓励您完整阅读documentation 并阅读migration guide，以便了解您正在使用的代码是针对哪个 SDK 版本构建的。

注意：您应该进一步改进此代码以更好地处理错误，例如为失败的上传设置对用户可见的错误消息。