为什么我的函数没有设置 Firebase 文档，而是设置了其他所有内容？答案

【问题标题】：Why does my function not set Firebase document but does everything else?为什么我的函数没有设置 Firebase 文档，而是设置了其他所有内容？
【发布时间】：2021-07-11 20:48:47
【问题描述】：

我创建了一个函数，可以将图像添加到 Firebase 存储，并将其链接、时间戳以及 Firebase 文档的标题和内容字段设置为。然后它创建一个子集合并向其中添加标题和内容字段。单击提交按钮时，它会将图像添加到 Firebase 存储，并添加子集合和子集合的字段。但是，由于某种原因，它并不总是采用将图像链接和其他字段放在原始集合中的快照查询。我收到这些错误：

获取https://firebasestorage.googleapis.com/v0/b/myheadcanon-31cf9.appspot.com/o/images%2Fljc9B3tKTQ9yLQHLqutu.png

headcanon.ca/:1 Uncaught (in promise) v {code_: "storage/object-not-found", message_: "Firebase Storage: Object 'images/ljc9B3tKTQ9yLQHLqutu.png' does not exist.", serverResponse_: “{↵“错误”：{↵“代码”：404，↵“消息”：“不……没有得到对象”，↵“状态”：“GET_OBJECT”↵ }↵}”，名称_：“FirebaseError”}

这可能是什么原因？

var file = '';
          var fileName = '';
          var extension = '';
          const fileInput = document.getElementById("fileButton");

          fileInput.addEventListener('change',function(e){
            console.log("File added!");
              console.log(e.target);
             const selectedFiles = [...fileInput.files];
          for (const f of selectedFiles) {
            console.log(f);
          }

            file = e.target.files[0];
            console.log(file.name);
            fileName = file.name.split('.').shift();
            extension = file.name.split('.').pop();
          });
            
            document.getElementById("submitButton").addEventListener("click", function() {
                var storyTitle = document.getElementById("storyTitle").value;
                var storySummary = document.getElementById("storySummary").value;
                var chapterTitle = tinymce.get("writeTitle").getContent();
                var chapterContent = tinymce.get("chapterContent").getContent();
                const myDatabase = firebase.firestore();

                addStory(storyTitle,storySummary,chapterTitle,chapterContent,file,fileName,extension);  
            });
            
            document.getElementById("updateButton").addEventListener("click", function() {
                var mainTitle = document.getElementById("storyTitle").value;
                var mainSummary = document.getElementById("storySummary").value;
                var firstChapter = tinymce.get("writeTitle").getContent();
                var firstContent = tinymce.get("chapterContent").getContent();
                const fbDatabase = firebase.firestore();
                
                console.log(mainTitle+','+mainSummary+','+firstChapter+','+firstContent);

                addStory(mainTitle,mainSummary,firstChapter,firstContent,file,fileName,extension);  
            });
    

    
async function addStory(story,summary,chapter,theContent,imageFile,imageName,extension) {
    const db = firebase.firestore();
    document.getElementById("testing").innerHTML = "Story Title: " + story + "Chapter Title: " + chapter + "Chapter Content: " + theContent;
    const storiesRef = db.collection('Stories').doc(story);
    const fbBucketName = 'images';
    const id = db.collection("Stories").doc().id;
    /*const storageRef = firebase.storage().ref();
    const imageRef = storageRef.child(imageFile.name);
    */
    const storageRef = firebase.storage().ref(fbBucketName+'/'+id+'.'+extension);
    const uploadTask = storageRef.put(imageFile);

uploadTask.on('state_changed',
      function(snapshot){
        
        console.log('Uploaded');
        uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL){
          storiesRef
          .set({
            title: story,
            summary: summary,
            image: downloadURL,
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
          })
        }).then(function(){
          console.log("Upload complete!");
         imageFile='';
         imageName='';
         extension='';
        })
    });
    
    await storiesRef.collection("Chapters").add({
        title: chapter,
        content: theContent
    });
}
        </script>
    <?php
  }
}

【问题讨论】：

您是否遇到任何错误？
是的，这两个：GET firebasestorage.googleapis.com/v0/b/…headcanon.ca/:1 Uncaught (in promise) v {code_: "storage/object-not-found", message_: "Firebase Storage: Object '图像/ljc9B3tKTQ9yLQHLqutu.png' 不存在。”, serverResponse_: "{↵ "error": {↵ "code": 404,↵ "message": "No...not get object",↵ "status": "GET_OBJECT" ↵ }↵}”，名称_：“FirebaseError”}

标签： javascript firebase google-cloud-firestore firebase-storage

【解决方案1】：

如果您只关心上传的完成（就像这里的情况），我建议使用put 调用的承诺而不是回调。

看起来像这样：

uploadTask.then(function(snapshot){        
  return uploadTask.snapshot.ref.getDownloadURL()
}).then(function(downloadURL){
  return storiesRef.set({
    title: story,
    summary: summary,
    image: downloadURL,
    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
  })
}).then(function(){
 console.log("Upload complete!");
 imageFile='';
 imageName='';
 extension='';
})

【讨论】：