Question

我正在尝试将一组图像上传到aws s3存储桶并在进度栏中逐个显示其进度。在代码中，贝娄present_images_array是图像数据值的数组。我的示例代码为贝娄

function uploadImgValToItems(img){
 var bar = $('.progress-bar');
 var percent = $('.percent');
 var status = $('#status');
 var blobData = dataURItoBlob(img);
 var albumPhotosKey = 'uploads/' + encodeURIComponent("items") + '/';
 var photo_id = uuidv4();
 var photoKey = albumPhotosKey + photo_id+".jpeg";

 s3.upload({
  Key: photoKey,
  Body: blobData,
  ContentType: 'image/jpeg',
  ACL: 'public-read'
 }).on('httpUploadProgress', function(evt) {
  main_image_size = evt.total;
  per = parseInt((evt.loaded * 100) / evt.total);
  bar.width(per+"%")
  bar.attr("aria-valuenow",per);
  bar.html(per+"%");
  status.html("Uploading ");
  status.show();
  console.log("Uploaded :: " + parseInt((evt.loaded * 100) / 
  evt.total)+'%');

 }).send(function(err, data) {
  if (err) {
   alert("error occured"}
  }else{
   alert("upload completed successfully")
  }
 });
 }

当我在for循环中调用此函数时

for (img of present_images_array){
  uploadImgValToItems(img); 
}

我要先完全上传第一张图像，然后再上传下一张图像。但是实际发生的是图像异步上传。如何使for循环等待功能完成。？

Answer 1

您可以使用send()返回一个可以使用的Promise，而不用.promise()进行回调，并且可以await在循环中进行承诺。为此，您必须兑现承诺：

const upload = s3.upload({
  Key: photoKey,
  Body: blobData,
  ContentType: 'image/jpeg',
  ACL: 'public-read'
});

upload.on('httpUploadProgress', function(evt) {
    //...
});

return upload.promise(); // <---

因此，您现在可以简单地await，但是为此，循环必须在返回承诺的自我的异步函数内部：

(async function() {      
   for (const img of present_images_array){
     await uploadImgValToItems(img); 
   }
})();

如何防止for循环开始下一次迭代，直到其中的功能（AWS S3上传功能）完全完成？

1 个答案: