如何修复 React/Redux/Firebase 错误上传文件到存储

Posted 2023-02-19

【中文标题】如何修复 React/Redux/Firebase 错误上传文件到存储

【英文标题】：How to fix React/Redux/Firebase error uploading file to storage

【发布时间】：2019-09-17 16:52:03

【问题描述】：

我正在设置一个文件上传器，它将图像上传到我的 Firebase 存储。我正在使用 React-Redux-Firebase 来完成所有这些工作。根据docs，我应该能够使用来自props.firebase 的uploadFiles 或uploadFile 函数，使用firebaseConnect 或getFirebase()。当我尝试此操作时，我收到错误：未捕获的错误：上传文件需要 Firebase 存储。

export const addImage = (image, callback = () => ) => 
    return (dispatch, getState,  getFirebase, getFirestore ) => 
        const firebase = getFirebase();
        const imagesPath = "images";

        firebase.uploadFile(imagesPath, image).then(uploadTaskSnapshot => 
            console.log("uploadTaskSnapshot", uploadTaskSnapshot);
        );

        dispatch( type: "ADDED_IMAGE", image );
    ;
;

当我尝试 console.log 时，该函数存在。但它几乎就像我的存储没有设置。我检查了我的 firebase 控制台，它确实存在。我还检查了我的 api 密钥设置，存储桶变量是正确的。

这是我在 index.js 文件和 firebaseConfig 文件中使用的设置代码。

Index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import  createStore, applyMiddleware, compose  from "redux";
import rootReducer from "./store/reducers/rootReducer";
import  Provider  from "react-redux";
import thunk from "redux-thunk";
import  reduxFirestore, getFirestore  from "redux-firestore";
import  reactReduxFirebase, getFirebase  from "react-redux-firebase";
import fbConfig from "./config/fbConfig";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore )),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig,  useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true )
    )
);

store.firebaseAuthIsReady.then(() => 
    ReactDOM.render(
        <Provider store=store>
            <App />
        </Provider>,
        document.getElementById("root")
    );
);

fbConfig.js：

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

// Initialize Firebase
var config = 
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID
;

firebase.initializeApp(config);
firebase.firestore();
console.log("firebase", firebase);

export default firebase;

【参考方案1】：

我找到了答案。我需要一个额外的导入来在我的 index.js 文件中导入“firebase/storage”。

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import  createStore, applyMiddleware, compose  from "redux";
import rootReducer from "./store/reducers/rootReducer";
import  Provider  from "react-redux";
import thunk from "redux-thunk";
import  reduxFirestore, getFirestore  from "redux-firestore";
import  reactReduxFirebase, getFirebase  from "react-redux-firebase";
import fbConfig from "./config/fbConfig";
import "firebase/storage";

require("dotenv").config();

const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore )),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig,  useFirestoreForProfile: true, userProfile: "users", attachAuthIsReady: true )
    )
);

store.firebaseAuthIsReady.then(() => 
    ReactDOM.render(
        <Provider store=store>
            <App />
        </Provider>,
        document.getElementById("root")
    );
);

【讨论】：

您是否尝试在 config.js 中导入“firebase/storage”？