Дождитесь загрузки файла, прежде чем переходить к следующей итерации l oop?

Question

Я загружаю файлы в хранилище firebase внутри al oop, но l oop не ждет и завершает работу до завершения загрузки. Как я могу решить эту проблему?

Вот функция 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

Использование 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");
}

Answer 2

Вам нужно будет использовать asyn c l oop, чтобы успешно запустить код. Поскольку задача загрузки Firebase имеет асин c, l oop не будет продолжаться, как только API вернет результат успеха. Проверьте это здесь:

Javascript asyn c 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
}