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

Posted 2023-03-22

【中文标题】我正在尝试上传图片，但图片未添加到云 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

【发布时间】：2021-12-17 00:26:13

【问题描述】：

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

无法解决此问题。请帮忙。

【参考方案1】：

您在此处的文件名中有一个额外的空格：

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()...