firebase 存储 ref 不是函数

Posted 2023-03-22

【中文标题】firebase 存储 ref 不是函数

【英文标题】：firebase storage ref is not a function

【发布时间】：2021-12-26 00:17:25

【问题描述】：

我是网络开发新手。在过去的 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);
                );
            
        );
    );
;

有什么建议吗？

【参考方案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 版本构建的。

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

【讨论】：

嗨，山姆，感谢您的评论，我会阅读更多文档。谢谢你的提示，我希望这个功能能成功。我祝愿一切顺利，度过美好的一天