上传到 Firebase 错误“.storage.ref 不是函数”

Posted 2023-03-22

【中文标题】上传到 Firebase 错误“.storage.ref 不是函数”

【英文标题】：Upload to firebase error ".storage.ref is not a function"

【发布时间】：2022-01-14 17:53:05

【问题描述】：

在我的 index.js 文件中：

export function postArticleAPI(payload) 
   return(dispatch) => 
      const upload = storage
        .ref(`images/$payload.image.name`)
        .put(payload.image);
      upload.on("state_changed", (snapshot) => 
        const progress = (
          (snapshot.BytesTransferred / snapshot.totalBytes) * 100);
          console.log(`Progress: $progress%`);
        if(snapshot.state === "RUNNING") 
          console.log(`Progress: $progress%`);
        
      ,
      (error) => console.log(error.code),
      async() => 
        const downloadURL = await upload.snapshot.ref.getDownloadURL();
        db.collection("articles").add(
        ...
        );
      );
    
  ;

我查看了 firebase 提供的 docs，但我不确定如何实现它。当我运行上面的代码时，我得到“TypeError: firebase__WEBPACK_IMPORTED_MODULE_0_.storage.ref is not a function”错误。

我弄乱了代码，还遇到了其他错误，例如：“...storage.put 不是函数”，上传时遇到错误，以及 db.collection 错误。

这是我的 firebase.js：

import  initializeApp  from 'firebase/app';
import  getAuth, GoogleAuthProvider  from 'firebase/auth';
import  getStorage  from "firebase/storage";
import  getFirestore  from "firebase/firestore";

const firebaseConfig = 
...


const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth();
const provider = new GoogleAuthProvider();
const storage = getStorage(firebaseApp);
  
export  auth, provider, storage ;
export default db;

任何帮助将不胜感激（这是我的第一篇文章，所以如果我需要添加任何其他内容，请告诉我）。谢谢！

【参考方案1】：

由于您使用 v9 语法来导入***函数，因此不再有 storage.ref() 方法。相反，如getting a reference 和uploading files 上的文档所示，您可以这样做：

const ref = ref(storage, `images/$payload.image.name`)
const upload = uploadBytes(ref, payload.image);

【讨论】：

漂亮！这帮助很大！我能够摆脱错误。