Firebase在使用存储向数据库发布imageURL时出现延迟,这导致在尝试向数据库中添加新数据时我的push方法中断

javascript jquery firebase firebase-realtime-database firebase-storage

186 观看

2回复

69 作者的声誉

我正在创建一个名为testData的对象,其中包含不同的属性。这些属性之一是“图片”属性,通过该属性,用户可以上载图像,然后使用存储将图像存储在Firebase中。但是,当我尝试使用推送数据时,出现 firebaseRef.push(testData)... => { ... } 以下错误:

firebase-storage.js:3476未捕获的错误:Reference.push失败:第一个参数包含未定义的“图片”属性

下面是我的testData对象的样子:

var testData = {
	  "Name" : name,
	  "Phone" : phone.value,
	  "Picture" : downloadURL,
	  "q1": q1.value,
	  "q2": q2.value,
	  "q3": q3.value
	  };

但是,如果我等待一秒钟,然后再单击一次提交按钮将其推testData送到firebase,它将正确执行,并且一切正常。从要上传的图像发送到Firebase Storage并形成downloadURL要保存为字段的形式到现在似乎有一个延迟,以便我知道哪个图像与哪个键相关联。任何人都知道为什么我有一个奇怪的错误,在该错误中,第一次尝试保存到Firebase无效,然后等待一秒钟,然后重试,然后正确执行

作者: user3892254 的来源 发布者: 2017 年 9 月 15 日

回应 2


0

2273 作者的声誉

您应该利用.put()回报的承诺

例如:

firebase.storage().ref('path').put( /* file */ ).then(
  snapshot => {
    firebase.database()
      .ref('path')
      .set({ 
        name: 'name',
        downloadURL: snapshot.downloadURL,
        // other properties
      })
  },
  error => {
    // Handle potential errors
  }
)

这样可以确保在更新数据库之前已上传文件

作者: Sidney 发布者: 2017 年 9 月 15 日

0

910 作者的声誉

决定

尝试这种方式。

 uploadTask.on('state_changed', function(snapshot){
       var percentageUploaded = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; //check if its' 100% then get the download url like below,
          if(percentageUploaded ==100){
            storageRef.getDownloadURL().then(function(url) {
                //here you'll get the download url once the file is uploaded.
                var testData = {
                     "Name" : name,
                     "Phone" : phone.value,
                     "Picture" : url,
                     "q1": q1.value,
                     "q2": q2.value,
                     "q3": q3.value,
                     "Timestamp": firebase.database.ServerValue.TIMESTAMP
                 };
          //then do your push to the firebase
          firebaseRef.push(testData).then((snap) => {
              console.log("pushed to firebase");
           });
              });
         }   

    });

请参阅此jsfiddle示例

作者: MuruGan 发布者: 2017 年 9 月 15 日
32x32