我正在尝试上传图片，但图片未添加到云 Firestore，它已上传到 firebase 存储但未显示在 React 应用程序中

Question

这是在 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`
  }
}

无法解决此问题。请帮忙

Answer 1

你这里的文件名多了一个space:

const uploadTask= storage.ref('images/$ {image.name}').put(image);
                                    //

当您在此处调用 getDownloadURL 时，您没有相同的 space：

storage
 .ref("images") 
 .child(image.name)
 .getDownloadURL()

所以这两个代码片段指向不同的文件，这就解释了为什么第二个片段找不到你上传的文件。

我建议使用单个变量来保存引用，并在两个片段中使用它：

const imageRef = storage
 .ref("images") 
 .child(image.name);
const uploadTask= imageRef.put(image);

...

imageRef.getDownloadURL()...

我正在尝试上传图片，但图片未添加到云 Firestore，它已上传到 firebase 存储但未显示在 React 应用程序中

I'm trying to upload image but image is not adding to cloud firestore, its uploaded on firebase storage But not showing in React app

javascript

firebase

firebase-storage

google-cloud-firestore