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

【问题标题】：Upload to firebase error ".storage.ref is not a function"上传到 Firebase 错误“.storage.ref 不是函数”
【发布时间】：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;

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

【问题讨论】：

标签： javascript firebase firebase-storage

【解决方案1】：

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

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

【讨论】：

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