如何修复React/Redux/Firebase错误上传文件到存储
如何修复React/Redux/Firebase错误上传文件到存储
提问于 2019-04-29 04:32:07
我正在设置一个文件上传器，将图像上传到我的防火墙存储。我正在使用React Redux-Firebase来完成所有这一切。根据文档，我应该能够使用来自props.firebase的uploadFiles或uploadFile函数，使用firebaseConnect或getFirebase()。当我尝试这样做时，我得到了错误：未登录错误:上传文件需要防火墙存储。。
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它时，这个函数就存在了。但就好像我的储藏室没建好一样。我已经检查了我的消防控制台，它确实存在。我还检查了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
Stack Overflow用户
发布于 2019-04-29 04:48:59
我找到了答案。我需要一个额外的导入，在我的index.js文件中导入“firebase/存储”。
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")
);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55897003
复制相关文章
相似问题
腾讯云开发者
