Javascript React js image uploder代码与firebase云存储发生错误？
我正在创建一个instagram克隆，我用react js制作了它，数据库是cloud firestore，并使用云存储存储图像 当我点击上传按钮时，ImageUpload.js中出现错误，并且进度条在控制台中不显示任何进度 如下错误显示： FirebaseStorageError{code_u:“存储/无效参数”，消息_u:“Firebase存储：inde上的Javascript React js image uploder代码与firebase云存储发生错误？,javascript,reactjs,firebase,firebase-storage,Javascript,Reactjs,Firebase,Firebase Storage,我正在创建一个instagram克隆，我用react js制作了它，数据库是cloud firestore，并使用云存储存储图像 当我点击上传按钮时，ImageUpload.js中出现错误，并且进度条在控制台中不显示任何进度 如下错误显示： FirebaseStorageError{code_u:“存储/无效参数”，消息_u:“Firebase存储：inde上的中的无效参数…应为以下事件类型之一：[state_changed]。”，serverResponse_u:“null，name_Base
中的无效参数…应为以下事件类型之一：[state_changed]。”，serverResponse_u:“null，name_BaseError”}
ImageUpload.js的代码
import React, { useState, useEffect } from "react";
import "./App.css";
import Post from "./Post";
import { db, auth } from "./firebase";
import Modal from "@material-ui/core/Modal";
import { makeStyles } from "@material-ui/core/styles";
import { Button, Input } from "@material-ui/core";
import ImageUpload from "./ImageUpload";
function getModalStyle() {
const top = 50;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: "absolute",
width: 400,
backgroundColor: theme.palette.background.paper,
border: "2px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
function App() {
const classes = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [posts, setsPosts] = useState([]);
const [open, setOpen] = useState(false);
const [openSignIn, setOpenSignIn] = useState(false);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [user, setUser] = useState(null);
// UseEffect ::--> Runs a piece of code based on a specific condition
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
if (authUser) {
//user has logged in....
console.log(authUser);
setUser(authUser);
} else {
//user has logged out....
setUser(null);
}
});
return () => {
//perform some cleanup actions
unsubscribe();
};
}, [user, username]);
useEffect(() => {
//this is where the code runs
db.collection("posts").onSnapshot((snapshot) => {
//every time a new post is added,this code firebase
setsPosts(
snapshot.docs.map((doc) => ({
id: doc.id,
post: doc.data(),
}))
);
});
}, []);
const signUp = (event) => {
event.preventDefault();
auth
.createUserWithEmailAndPassword(email, password)
.then((authUser) => {
return authUser.user.updateProfile({
displayName: username,
});
})
.catch((error) => alert(error.message));
setOpen(false);
};
const signIn = (event) => {
event.preventDefault();
auth
.signInWithEmailAndPassword(email, password)
.catch((error) => alert(error.message));
setOpenSignIn(false);
};
return (
<div className="app">
{user?.displayName ? (
<ImageUpload username={user.displayName} />
) : (
<h3>Sorry you need to login to upload</h3>
)}
<Modal open={open} onClose={() => setOpen(false)}>
<div style={modalStyle} className={classes.paper}>
<form className="app__signup">
<center>
<img
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"
alt=""
/>
</center>
<Input
placeholder="usermane"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" onClick={signUp}>
Sign Up
</Button>
</form>
</div>
</Modal>
<Modal open={openSignIn} onClose={() => setOpenSignIn(false)}>
<div style={modalStyle} className={classes.paper}>
<form className="app__signup">
<center>
<img
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"
alt=""
/>
</center>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" onClick={signIn}>
Sign Up
</Button>
</form>
</div>
</Modal>
<div className="app__header">
<img
className="app__headerImage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"
alt=""
/>
</div>
{user ? (
<Button onClick={() => auth.signOut()}>Log Out</Button>
) : (
<div className="app__loginContainer">
<Button onClick={() => setOpenSignIn(true)}>Sign In</Button>
<Button onClick={() => setOpen(true)}>Sign Up</Button>
</div>
)}
{/* <h1>Lets built ig-clone with React</h1> */}
{posts.map(({ id, post }) => (
<Post
key={id}
username={post.username}
caption={post.caption}
imageUrl={post.imageUrl}
/>
))}
{/* <Post
username="cleverqazi"
caption="WoW is works"
imageUrl="https://pbs.twimg.com/profile_images/446356636710363136/OYIaJ1KK_400x400.png"
/>
<Post
username="ssssangha"
caption="Dope"
imageUrl="https://images.unsplash.com/photo-1599687266197-6c66c083b39c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80https://images.unsplash.com/photo-1599687266197-6c66c083b39c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
/>
<Post
username="amatsf"
caption="This is fun Project"
imageUrl="https://images.unsplash.com/photo-1600872844932-f95ce063b94c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
/>
Post */}
</div>
);
}
export default App;
import React, { useState, useEffect } from "react";
import "./App.css";
import Post from "./Post";
import { db, auth } from "./firebase";
import Modal from "@material-ui/core/Modal";
import { makeStyles } from "@material-ui/core/styles";
import { Button, Input } from "@material-ui/core";
import ImageUpload from "./ImageUpload";
function getModalStyle() {
const top = 50;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: "absolute",
width: 400,
backgroundColor: theme.palette.background.paper,
border: "2px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
function App() {
const classes = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [posts, setsPosts] = useState([]);
const [open, setOpen] = useState(false);
const [openSignIn, setOpenSignIn] = useState(false);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [user, setUser] = useState(null);
// UseEffect ::--> Runs a piece of code based on a specific condition
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
if (authUser) {
//user has logged in....
console.log(authUser);
setUser(authUser);
} else {
//user has logged out....
setUser(null);
}
});
return () => {
//perform some cleanup actions
unsubscribe();
};
}, [user, username]);
useEffect(() => {
//this is where the code runs
db.collection("posts").onSnapshot((snapshot) => {
//every time a new post is added,this code firebase
setsPosts(
snapshot.docs.map((doc) => ({
id: doc.id,
post: doc.data(),
}))
);
});
}, []);
const signUp = (event) => {
event.preventDefault();
auth
.createUserWithEmailAndPassword(email, password)
.then((authUser) => {
return authUser.user.updateProfile({
displayName: username,
});
})
.catch((error) => alert(error.message));
setOpen(false);
};
const signIn = (event) => {
event.preventDefault();
auth
.signInWithEmailAndPassword(email, password)
.catch((error) => alert(error.message));
setOpenSignIn(false);
};
return (
<div className="app">
{user?.displayName ? (
<ImageUpload username={user.displayName} />
) : (
<h3>Sorry you need to login to upload</h3>
)}
<Modal open={open} onClose={() => setOpen(false)}>
<div style={modalStyle} className={classes.paper}>
<form className="app__signup">
<center>
<img
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"
alt=""
/>
</center>
<Input
placeholder="usermane"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" onClick={signUp}>
Sign Up
</Button>
</form>
</div>
</Modal>
<Modal open={openSignIn} onClose={() => setOpenSignIn(false)}>
<div style={modalStyle} className={classes.paper}>
<form className="app__signup">
<center>
<img
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"
alt=""
/>
</center>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" onClick={signIn}>
Sign Up
</Button>
</form>
</div>
</Modal>
<div className="app__header">
<img
className="app__headerImage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"
alt=""
/>
</div>
{user ? (
<Button onClick={() => auth.signOut()}>Log Out</Button>
) : (
<div className="app__loginContainer">
<Button onClick={() => setOpenSignIn(true)}>Sign In</Button>
<Button onClick={() => setOpen(true)}>Sign Up</Button>
</div>
)}
{/* <h1>Lets built ig-clone with React</h1> */}
{posts.map(({ id, post }) => (
<Post
key={id}
username={post.username}
caption={post.caption}
imageUrl={post.imageUrl}
/>
))}
{/* <Post
username="cleverqazi"
caption="WoW is works"
imageUrl="https://pbs.twimg.com/profile_images/446356636710363136/OYIaJ1KK_400x400.png"
/>
<Post
username="ssssangha"
caption="Dope"
imageUrl="https://images.unsplash.com/photo-1599687266197-6c66c083b39c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80https://images.unsplash.com/photo-1599687266197-6c66c083b39c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
/>
<Post
username="amatsf"
caption="This is fun Project"
imageUrl="https://images.unsplash.com/photo-1600872844932-f95ce063b94c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
/>
Post */}
</div>
);
}
export default App;
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import firebase from "firebase";
const firebaseapp = firebase.initializeApp({
apiKey: "AIzaSyAOozRFYMCWRQYQ4DZg19LB-8naEiL7WDvWE",
authDomain: "instagram-clone-react-cc16f.firebaseapp.com",
databaseURL: "https://instagram-react-cc16f.firebaseio.com",
projectId: "instagram-clone-react-cc6f",
storageBucket: "instagram-clone-react-cc16f.appspot.com",
messagingSenderId: "602134433443",
appId: "1:602189635954:web:d2d9096d64345349101bdeb",
measurementId: "G-CW4M24VATZ",
});
const db = firebaseapp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export { db, auth, storage };
您必须在发送图片的按钮上添加handleUpload
函数ImageUpload（{username}）{
const[caption，setCaption]=useState（“”）；
const[image，setImage]=useState（null）；
const[progress，setProgress]=useState（0）；
常数handleChange=（e）=>{
if（e.target.files[0]）{
setImage（e.target.files[0]）；
}
};
常量handleUpload=（）=>{
const uploadTask=storage.ref（`images/${image.name}`）.put（image）；
上传任务(
“状态已更改”，
（快照）=>{
//进度函数
const progress=Math.round(
（snapshot.bytesttransfered/snapshot.totalBytes）*100
);
设定进度（进度）；
},
（错误）=>{
//误差函数
console.log（错误）；
警报（错误消息）；
},
() => {
//完全功能
存储
.ref（“图像”）
.child（image.name）
.getDownloadURL（）
。然后（（url）=>{
//在数据库中发布图像
db.收集（“帖子”）。添加({
时间戳：firebase.firestore.FieldValue.serverTimestamp（），
描述：描述，
imageUrl:url，
用户名：用户名，
});
setProgress（0）；
设置标题（“”）；
setImage（空）；
});
}
);
};
返回(
{/*
-我想要。。。
-字幕输入
-文件图片*/}
setCaption（event.target.value）}
值={caption}
/>
上传
);
}
导出默认图像上传
该错误指的是哪一行代码？我在这里看不到。事实上，正如错误消息所示，我没有看到任何处理云存储的代码。我认为它在ImageUpload.js的捕获行中。您仅有的捕获是针对Firebase Auth API的。我仍然没有在这里看到任何关于云存储的代码。我在问题的描述中添加了firebase.js。我希望api密钥已经被更改，因为它现在已经在Google上被索引，与您的开发者URL一起发布在这里