将多个图像从客户端上传到服务器的最佳实践

Question

我正在从我的客户端浏览器 (Aws s3 direct form upload/stream), 一次上传多个图像，最多 25 images。

在我上传图片之前，我会压缩它们以使它们更小。

但现在我不确定是应该一次上传所有图像还是使用递归

一次上传所有图像

示例 1，循环浏览我的图片并一次性上传所有图片

var imagesUploaded = [];
      for (var i = 0; i < _this.imgArray.length; i++) {

        var params = {
          Key: 'images/' + id + '/' + _this.imgArray[i].name,
          ContentType: 'image/jpeg',
          Body: _this.imgArray[i],
          ACL: 'public-read'
        };

        bucket.putObject(params, function(err, data) {
          if (err) {
            console.log(err);
          } else {
            //Run callback when all images are uploaded
            imagesUploaded.push("dummy"); //Just to end loop when all images are done
            if (imagesUploaded.length === _this.imgArray.length) {
              //Done uploading all.
              callback();
            }
          }
        });

      }

示例 2，使用递归。一次上传一张图片，上一张完成后开始下一张。

func recursionUpload() {

.. some other code

var s3 = new AWS.S3({apiVersion: '2006-03-01', region: 'us-west-2'});
var params = {
  Bucket: 'bucket',
  Key: 'example2.txt',
  Body: 'Uploaded text using the promise-based method!'
};
var putObjectPromise = s3.putObject(params).promise();
putObjectPromise.then(function(data) {
  console.log('Success');

  //Upload next image
  recursionUpload()


}).catch(function(err) {
  console.log(err);
});


}

我觉得示例 1 速度要快得多，因为它会同时上传多张图片，但我担心它会占用浏览器的太多内存。那么哪个例子是“最佳实践”

Answer 1

最佳做法是使用队列。即使上传已经在运行，这也允许将新文件放入其中。

var queue = [];

function put(file) {
    queue.push(file);
}

function next() {
    return queue.shift();
}

function start() {
    var nextFile;
    while((nextFile = next()) !== undefined) {
        // upload nextFile
    }
}

Answer 2

您可以为此使用Promise.all()：

const s3 = new AWS.S3({apiVersion: "2006-03-01"});

const uploadImages = function uploadImages(images) {
  return Promise.all(images.map((img) => {
    const params = {
      Bucket: "your-bucket-name",
      Key: img.FileName,
      Body: img.Data
    };
    return s3.putObject(params).promise();
  }));
};

uploadImages(_this.imgArray)
  .then((responses) => {
    console.log(responses);
  })
  .catch((err) => {
    console.error(err.message);
  });

Answer 3

通常最好避免递归，因为它往往会导致程序内存不足或在达到递归限制时中断。

上传（许多）文件最好使用 ftp 完成。