无法从 firebase/storage 导入 { getStorage } 以与 React Native Expo 图像选择器一起使用

Question

我正在尝试让图像选择器保存到 Firebase。我已经阅读了许多教程以及 Google 云存储的官方文档。他们都说要做这样的事情：

import { getStorage, ref } from "firebase/storage";

所以你可以：

const storage = getStorage()

然后

const ref = firebase.storage().ref();

无论我做什么，除了这个错误我什么也得不到：

TypeError: (0, _storage.getStorage) is not a function. (In '(0, _storage.getStorage)()', '(0, _storage.getStorage)' is undefined)

我可以在 node_modules 中看到 firebase/storage。我通过控制台登录 (firebase) 以确保它是一回事。我尝试了一百万种不同的导入。我安装了其他 firebase 依赖项，如 @react-native-firebase 以使用它们的存储功能，但没有任何效果。 Firebase 的其他一切对我来说都很好。

我不知道问题出在哪里。我很乐意用另一种方式来做，但一切都说要使用 storage() 方法。难道我做错了什么？除了使用存储方式将图片上传到云端，还有其他方法吗？

Answer 1

检查您应用中的 Firebase 版本。

Firebase 版本 8 使用 firebase.storage() 方法。

要使用 getStorage，您需要使用 Firebase v9.x

请参阅本指南了解如何升级： Upgrade from version 8 to the modular Web SDK

对于版本 8，请确保单击 Firebase 文档中的 Web 版本 8 选项卡： https://firebase.google.com/docs/storage/web/upload-files

这是一段对我有用的代码 (Firebase V8)。

我的 Firebase 初始化文件：FirebaseInitialize.js

import firebase from "firebase/app";
import "firebase/storage";

import { firebaseConfig } from "./firebaseConfig";

firebase.initializeApp(firebaseConfig);

export { firebase };

我的 Firebase 配置文件

export const firebaseConfig = {
  apiKey: "YOUR-API-KEY",
  authDomain: "YOUR-DOMAIN.firebaseapp.com",
  databaseURL: "https://YOUR-DOMAIN.firebaseio.com",
  projectId: "YOUR-PROJECTID",
  storageBucket: "YOUR-SOTRAGEBUCKET.appspot.com",
  appId: "APP-ID",
};

在我需要使用存储的地方，我就是这样做的：

import { firebase } from "./FirebaseInitialize";

const storageRef = firebase.storage().ref();

storageRef.put(file).then((snapshot) => {
  console.log("Uploaded!");
});

希望对您有所帮助。

Answer 2

import firebase from "firebase/app"; 
import "firebase/storage";

对我有用确保你使用的 firebase 版本 < 9

const handleUpload = async (pic) => {
    try {
        const response = await fetch(pic)
        const blob = await response.blob()
        const storageRef = firebase.storage().ref();
        // storageRef.put(blob).then((snapshot) => {
        //     console.log("Uploaded!");
        // });
        let ref = storageRef.child("/images/" + decoded.id)
        return ref.put(blob)
    } catch (error) {
        console.log(error)
    }
}

无法从 firebase/storage 导入 { getStorage } 以与 React Native Expo 图像选择器一起使用

Cannot import { getStorage } from firebase/storage to use with React Native Expo image picker

javascript

react-native

firebase-storage

expo