[英]Why I have to select 2 times (different photo) for displaying image in firebase storage
When I click uploading images first time it shows loading affect but show nothing even background image for uploading and then I have to upload different image for displaying image before submitting to go to Newfeed-page that show my account.So Iam not sure that because my code or firebase service that I have to config some rule.当我第一次单击上传图像时,它会显示加载影响,但甚至不显示任何背景图像以进行上传,然后我必须上传不同的图像以显示图像,然后再将 go 提交到显示我的帐户的 Newfeed 页面。所以我不确定,因为我的我必须配置一些规则的代码或 firebase 服务。 Thanks for helping me谢谢你帮助我
import { useCookies } from "react-cookie";
import {
ref, uploadBytesResumable, getDownloadURL, getStorage
} from "firebase/storage";
import styled from "styled-components";
const Avatar = styled.div`
width: 250px;
height: 250px;
border-radius: 50%;
background-size: cover;
background-position: center;
cursor: pointer;
`;
function Photo() {
const [cookies] = useCookies(["userName"]);
const [image, setImage] = useState(null);
const [url, setUrl] = useState("./images/UploadPic.svg");
const handleChange = (e) => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
const storage = getStorage();
const storageRef = ref(storage, `images/${cookies.userName}`);
const uploadTask = uploadBytesResumable(storageRef, image);
uploadTask.on(
"state_changed",
() => {
setUrl("./loading.gif");
},
(error) => {
switch (error.code) {
case "storage/unauthorized":
console.log("storage is unauthorized");
break;
case "storage/canceled":
console.log("storage is canceled");
break;
case "storage/unknown":
console.log("storage is unknown");
break;
default:
console.log("sorry it is not about storage");
}
},
() => {
getDownloadURL(storageRef).then((url) => {
setUrl(url);
});
},
);
}
};
return (
<div style={{ alignSelf: "center" }}>
<label htmlFor="file-input">
<Avatar style={{ backgroundImage: `url(${url})` }} />
</label>
<input id="file-input" type="file" accept="image/*" onChange={handleChange} />
</div>
);
}
export default Photo;
<input id="file-input" type="file" accept="image/*" onChange={handleChange} />
hey please try changing above line to below嘿,请尝试将上面的行更改为下面
<input id="file-input" type="file" accept="image/*" onChange={() => handleChange()} />
not sure though worth trying不确定是否值得尝试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.