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

【问题标题】：Cannot import { getStorage } from firebase/storage to use with React Native Expo image picker无法从 firebase/storage 导入 { getStorage } 以与 React Native Expo 图像选择器一起使用
【发布时间】：2021-11-24 12:04:50
【问题描述】：

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

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

所以你可以：

const storage = getStorage()

然后

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

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

TypeError: (0, _storage.getStorage) 不是函数。（在 '(0, _storage.getStorage)()' 中，'(0, _storage.getStorage)' 是未定义的）

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

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

【问题讨论】：

标签： javascript react-native expo firebase-storage

【解决方案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!");
});

希望这会有所帮助。

【讨论】：

我使用的是版本 8(.2.3)，因为 9 破坏了一切。 storage() 方法是否需要从 firebase 或 firebase/storage 或其他东西导入？我会在这一点上尝试任何事情。
浏览文档时，请确保单击“Web 版本 8”选项卡。 firebase.google.com/docs/storage/web/upload-files我将编辑我的答案以包含使它对我有用的代码。
它仍然无法正常工作，但我将您的答案标记为正确，因为我认为当我有时间升级到 Firebase 9 时，它具有我需要让它工作的所有元素。感谢您的宝贵时间并希望其他人觉得这有帮助
感谢您的回答。代码在 V8 中，我已经更新了我的答案以包含配置文件以及所有导入语句以帮助使其正常工作。

【解决方案2】：

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

为我工作确保您使用 firebase 版本

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)
    }
}

【讨论】：