Question

我正在将文件上传到循环内的Firebase存储中，但是循环不等待并在完成上传之前退出。我该如何解决？

这是我正在使用的javascript功能：

       function submitImages() {

                for (var j = 0; j < files1.length; j++) {

                    // Create the file metadata
                    var metadata = {
                        contentType: 'image'
                    };
                    var fname = stid + " - " + files1[j].name;
                    var uploadTask = storageRef.child('student_images/' + fname).put(files1[j], metadata);

                    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
                        function(snapshot) {
                            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                            console.log('Upload is ' + progress + '% done');
                            switch (snapshot.state) {
                                case firebase.storage.TaskState.PAUSED: // or 'paused'
                                    console.log('Upload is paused');
                                    break;
                                case firebase.storage.TaskState.RUNNING: // or 'running'
                                    console.log('Upload is running');
                                    break;
                            }
                        },
                        function() {

                                uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {

                                console.log('File available at', downloadURL);

                            });


                        });
                }

                alert("Images Uploaded Successfully");

            }

Answer 1

您必须使用异步循环才能成功运行代码。由于Firebase上传任务是异步的，因此一旦API返回成功结果，循环将不会继续。在这里查看：

Javascript async https://caolan.github.io/async/v3/

对于您的代码，它看起来像这样：

async.eachLimit(files,1,function(image,callback){
 //Your firebase upload code
  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
                    function(snapshot) {
                        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                        console.log('Upload is ' + progress + '% done');
                        switch (snapshot.state) {
                            case firebase.storage.TaskState.PAUSED: // or 'paused'
                                console.log('Upload is paused');
                                break;
                            case firebase.storage.TaskState.RUNNING: // or 'running'
                                console.log('Upload is running');
                                break;
                        }
                    },
                    function() {

                            uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {

                            console.log('File available at', downloadURL);                  
                            //this is important - tells the async to go 
                           //to the next iteration result
                            callback(null)
                        });


                    });
},function(err){
   // do what you want to after upload everything
}

Answer 2

结合使用async/await和Promise.all()

像这样：

async function submitImages() {
  var uploadPromises = [];
  for (var j = 0; j < files1.length; j++) {
    // Create the file metadata
    var metadata = { contentType: 'image' };
    var fname = stid + " - " + files1[j].name;
    var uploadTask = storageRef.child('student_images/' + fname).put(files1[j], metadata);

    uploadPromises.push(
      new Promise((resolve, reject) => {
        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
          function (snapshot) {
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
            switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                    console.log('Upload is paused');
                    break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                    console.log('Upload is running');
                    break;
            }
          },
          function () {
            uploadTask.snapshot.ref.getDownloadURL()
              .then(function(downloadURL) {
                  console.log('File available at', downloadURL);
                  resolve()
              });
          }
        );
      })
    )
  }

  await Promise.all(uploadPromises)

  /* Now any code below this line will run only after all uploads are finished successfully */

  alert("Images Uploaded Successfully");
}

等待文件上传，然后再进行下一个循环迭代？

2 个答案: