Question

我一次从客户端浏览器data () { return {} }上传多个图片到(Aws s3 direct form upload/stream),。

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

但现在我不确定我是应该使用递归

一次上传所有图片还是一次上传

示例1，循环浏览我的图像并立即上传所有图像

25 images

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

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();
            }
          }
        });

      }

我觉得示例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。

完成

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

3 个答案: