递延/许JS多个火力点存储上传mecanism

Question

我是坚持了图片上传到我的项目火力数据库异步mecanism，这里是我的问题：

我已经在那里用户把一些信息的表单中，用户还需要提供4张照片才能完成上传过程。

我用火力数据库&火力存储来处理这个问题，这里的流量：

• 用户填写form1的窗口2 & form3与基于文本信息
• 用户选择IMG1 IMG2 IMG3 IMG4从他的电脑图像
• 用户clic提交所有4图片上传到firebase，并给我4下载url
• 我附加了所有以前收集的信息+ 4下载我们l在字典并将其运送到火力数据库

所以我的交易是建立和船舶字典只有当，如果4照片的URL设置，我听到关于递延/承诺概念，但我看到了很多Ajax请求，没有人有类似的问题，这里就是我现在

$("#submit-bag").click(function() { 

    var uploadDfdimg1 = function() { 
     var deferred = new $.Deferred(); 
     var uploadTask = storageRef.child('images/' + $img1.name).put($img1); 
     uploadTask.on('state_changed', function(snapshot){ 
     }, function(error) { 
     deferred.reject(error); 
     }, function() { 
     var downloadURL = uploadTask.snapshot.downloadURL; 
     console.log(downloadURL); 
     url1 = downloadURL; 
     deferred.resolve(downloadURL); 

     return deferred.promise(); 
     }); 
    } 
    var uploadDfdimg2 = function() { 
     var deferred = new $.Deferred(); 
     var uploadTask = storageRef.child('images/' + $img2.name).put($img2); 
     uploadTask.on('state_changed', function(snapshot){ 
     }, function(error) { 
     deferred.reject(error); 
     }, function() { 
     var downloadURL = uploadTask.snapshot.downloadURL; 
     console.log(downloadURL); 
     url2 = downloadURL; 
     deferred.resolve(downloadURL); 

     return deferred.promise(); 
     }); 
    } 
    $.when(uploadDfdimg1,uploadDfdimg2).then(
     function(){console.log('double trouble success')}, 
     function(){console.log(url1 + " deferred")}, 
     function(){console.log(url2 + " deferred")}); 


    var brand = $("#select1 option:selected").text() 
    var mail = document.getElementById('form1').value 
    var postal_code = document.getElementById('form2').value 
    var comment = document.getElementById('comment').value 
    //UPLOAD IMG 

    //uploadImg(img1,url1); 
    //uploadImg(img2,url2); 
    uploadImg(img3,url3); 
    uploadImg(img4,url4); 

    //console.log(url1); 
    //console.log(url2); 
    console.log(url3); 
    console.log(url4); 
    //PHOTO LINK VAR 
    var postData = { 
     marque: brand, 
     email: mail, 
     code_postal: postal_code, 
     commentaire: comment, 
     //PHOTO LINK 
     validation: 0 
    }; 
    var newPostKey = firebase.database().ref().child('submission').push().key; 
    var updates = {}; 
    updates['/submission/' + newPostKey] = postData; 
    firebase.database().ref().update(updates) 

就像你可以在这里看到，IMG3 & IMG4上传自己用旧的非fonctionnal方式（downloadUrl来的所有字典POSTDATA后发送）

for img1 & img2我尝试使用延迟，看看我是否可以在同一时间获得2个网址$ .when。（）。然后解雇，通常在两个uploadDfdimg函数成功承诺后

结果是，我立即得到了“双重麻烦”日志消息与空url变量，和第二正常后，通过火力的IMG3和IMG4

return log of the above code

我如何能够异步发送4图像返回两个网址firebase，获取网址，并在这个过程结束时，把我的字典中的网址发送到我的数据库？

Answer 1

这个问题似乎要求采取以下类型的方法。

首先是一个实用功能，它会提供上传过程并提供承诺包装downloadURL。现在

function uploadImg(img) { 
    return $.Deferred(function(dfrd) { 
     var uploadTask = storageRef.child('images/' + img.name).put(img); 
     uploadTask.on(
      'state_changed', 
      function(snapshot) {}, 
      function(error) { dfrd.reject(error); }, 
      function() { dfrd.resolve(uploadTask.snapshot.downloadURL); } 
     ); 
    }).promise(); 
} 

，该实用程序可以用来创建4个承诺，然后可以用$.when()汇总：

$("#submit-bag").click(function() { 
    var p1 = uploadImg(img1); 
    var p2 = uploadImg(img2); 
    var p3 = uploadImg(img3); 
    var p4 = uploadImg(img4); 
    $.when(p1, p2, p3, p4).then(function(downloadUrl1, downloadUrl2, downloadUrl3, downloadUrl4) { 
     // Whatever you want to do with downloadUrl1, downloadUrl3, downloadUrl3, downloadUrl4, ... 
     // ... do it somewhere in this function. 
     var updates = {}; 
     updates['/submission/' + firebase.database().ref().child('submission').push().key] = { 
      marque: $("#select1 option:selected").text(), 
      email: $('#form1').val(), 
      code_postal: $('#form2').val(), 
      commentaire: $('#comment').val(), 
      validation: 0 
     }; 
     firebase.database().ref().update(updates); 
    }); 
} 

更简洁，你可能会写：

$("#submit-bag").click(function() { 
    var promises = [img1, img2, img3, img4].map(uploadImg); 
    $.when.apply(null, promises).then(function(downloadUrl1, downloadUrl3, downloadUrl3, downloadUrl4) { 
     // Whatever you want to do with downloadUrl1, downloadUrl3, downloadUrl3, downloadUrl4, ... 
     // ... do it somewhere in this function. 
     // etc, as above 
    }); 
}