這是在 React 應用上上傳圖片的代碼。它顯示在 Firebase 存盤上，但未添加到云 Firestore 中。這就是為什么我無法在 React 應用程式上手動上傳任何影像。我用谷歌搜索了很多次，但無法解決這個問題。
function Imgupload({username}){
**strong text** const [caption,setCaption]=useState('');
const [image,setImage]=useState(null);
//const [url,setUrl]= useState("");
const [progress,setProgress]=useState(0);
const handlechange = (e)=>{
if(e.target.files[0]){
setImage(e.target.files[0]);
}
};
const handleUpload = () =>{
const uploadTask= storage.ref('images/$ {image.name}').put(image);
uploadTask.on(
"state_change",
(snapshot) =>{
//progress function..
const progress=Math.round(
(snapshot.bytesTransferred/snapshot.totalBytes) * 100
);
setProgress(progress);
},
(error) =>{ //error func..
console.log(error);
alert(error.message);
},
()=>{ //complete func..
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then (url =>{
//post img on db..
db.collection("posts").add({
timestamp:firebase.firestore.FieldValue.serverTimestamp(),
caption :caption,
imgurl :url,
username :username
});
setProgress(0);
setCaption("");
setImage(null);
});
}
);
}
這是來自控制臺的錯誤：
localhost/:1 Uncaught (in promise) FirebaseError: Firebase Storage: Object 'images/Screenshot (202).png' does not exist. (storage/object-not-found)
{
"error": {
"code": 404,
"message": "Not Found."`enter code here`
}
}
無法解決這個問題。請幫忙。
uj5u.com熱心網友回復：
此處的檔案名中有一個額外的空格：
const uploadTask= storage.ref('images/$ {image.name}').put(image);
// ??
當你getDownloadURL在這里打電話時，你沒有同樣的空間：
storage
.ref("images")
.child(image.name)
.getDownloadURL()
所以這兩個代碼片段指向不同的檔案，這就解釋了為什么第二個片段找不到你上傳的檔案。
我建議使用單個變數來保存參考，并在兩個片段中使用它：
const imageRef = storage
.ref("images")
.child(image.name);
const uploadTask= imageRef.put(image);
...
imageRef.getDownloadURL()...
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/346693.html
標籤：javascript 火力基地 谷歌云firestore 火力存储