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

Posted

技术标签:

【中文标题】无法从 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() 方法。难道我做错了什么?除了使用存储方式上传图片到云端还有其他方法吗?

【问题讨论】:

【参考方案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)
    

【讨论】:

以上是关于无法从 firebase/storage 导入 getStorage 以与 React Native Expo 图像选择器一起使用的主要内容,如果未能解决你的问题,请参考以下文章

firebase.storage() 不是 JavaScript 中的函数

颤振开发。通过 Stream Builder 从 Firebase Storage 和 Firestore 获取数据

Firebase Storage Web:如何上传文件

如何从 Firebase Storage 获取下载网址?

如何将 Url 从 Firebase Storage 存储到 ArrayList 中?

Nodejs fs.createReadStream无法读取Firebase Storage下载URL“ ENOENT:无此类文件或目录”