我正在尝试将照片存储在数据库(firebase)和存储器中.照片已存储在仓库中，但未添加到消防仓库中

Question

我正在尝试将照片同时存储在数据库(firebase(和存储器中。照片已存储在仓库中，但未添加到消防仓库中。有什么帮助吗？

下面的代码显示了我为执行任务所做的操作。哦，它在reactJs 中

function Preview() {
const cameraImage = useSelector(selectCameraImage);
const navigate = useNavigate();
const dispatch = useDispatch();
// if there is no Image taken then return to homepage (navigate('../'), {replace: 
true})
useEffect(()=>{
if(!cameraImage){
navigate('../', {replace: true});
}
}, [navigate, cameraImage])
const closePreview = ()=>{
dispatch(resetCameraImage())
}
const sendPost = () =>{
const id = uuid();
const uploadTask = storage
.ref(`posts/ ${id}`)
.putString(cameraImage, "data_url");
uploadTask.on('state_changed', null, (error) =>{
//error  function
console.log(error);
}, 
//COMPLETE function**this is the storage*## storage ##
()=>{storage
.ref('post')
.child(id)
.getDownloadURL()
.then((url) => {
db.collection('posts').add({
imageUrl: url,
username: 'yannick Simo',
read: false,
//profilePic
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
navigate('./chats', {replace: true});
})
})
}
return (
<div className="preview" >
<div onClick={sendPost} className="preview__footer">
<h2>Send Now</h2>
<SendIcon fontSize="small" className="preview__sendIcon" />
</div>
</div>);
}
export default Preview;

Answer 1

您调用getDownloadURL的引用与上传图像的引用不同。

上传到

const uploadTask = storage
.ref(`posts/ ${id}`)
.putString(cameraImage, "data_url");

然后你会得到这样的下载URL：

storage
.ref('post')
.child(id)
.getDownloadURL()

注意这些参考文献中的posts(复数(与post(单数(。

---

为了防止这种错误，我建议创建一个单独的变量来保存引用，然后在所有地方使用它：

const sendPost = () => {
const id = uuid();
const uploadRef = storage.ref(`posts/ ${id}`); // 👈
const uploadTask = ref.putString(cameraImage, "data_url"); // 👈
uploadTask.on('state_changed', null, (error) => {
//error  function
console.log(error);
},
() => {
ref.getDownloadURL() // 👈
.then((url) => {
db.collection('posts').add({
imageUrl: url,
username: 'yannick Simo',
read: false,
//profilePic
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
navigate('./chats', {
replace: true
});
})
})
}

---

作为最后的改进，由于您在其他回调中没有做任何事情，您也可以只考虑uploadTask本身就是一个promise，并在其上使用then()，以缩短代码并使其更惯用：

const sendPost = () => {
const id = uuid();
const uploadRef = storage.ref(`posts/ ${id}`);
const uploadTask = ref.putString(cameraImage, "data_url");
uploadTask.then(() => { // 👈
ref.getDownloadURL()
.then((url) => {
db.collection('posts').add({
imageUrl: url,
username: 'yannick Simo',
read: false,
//profilePic
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
navigate('./chats', {
replace: true
});
})
}).catch((error) => console.error(error)); // 👈
}

如果你使用现代JavaScript的async/await，你可以把它变成更简单的阅读：

const sendPost = () => async { // 👈
const id = uuid();
const uploadRef = storage.ref(`posts/ ${id}`);
await ref.putString(cameraImage, "data_url"); // 👈
const url = await ref.getDownloadURL() 👈
db.collection('posts').add({
imageUrl: url,
username: 'yannick Simo',
read: false,
//profilePic
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
navigate('./chats', {
replace: true
});
}