jQuery-file-upload：如何根据每个文件大小发送单独的请求答案

【问题标题】：jQuery-file-upload: how to send separate request per each file sizejQuery-file-upload：如何根据每个文件大小发送单独的请求
【发布时间】：2020-02-14 17:03:04
【问题描述】：

我使用 jQuery File Upload 小部件从客户端直接上传到 AWS S3。使用 CORS 和预签名 POST。

如果上传原始文件或文件大小调整一次它工作正常。同样适用于多选。

直到我添加调整大小的版本。调整大小是通过 jQuery-File-Upload 的 processQueue 来完成的。

如果尝试上传一张图片的多个分辨率 S3 返回错误消息“POST 要求每个请求只上传一个文件。”

如何为每个文件大小发送单独的 XHR 请求？

singleFileUploads 选项默认为 true，但它仅适用于不同的文件，而不适用于每个文件的文件版本。

我的情况是，我有以下结构：

file_input.element[0]
  data.files[0] - original size
  data.files[1] - thumbnail
file_input.element[1]
  data.files[0] - original size
  data.files[1] - thumbnail
...

猜想我需要使用回调选项，但已经 3 天找不到怎么办了。提前致谢。

主js如下所示：

$(document).on('turbolinks:load', function() {
  $(function() {
    var submitButton = $('#fileupload').find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    $('#fileupload').after(barContainer);

    $('#fileupload').fileupload({
      url:             $('#fileupload').data('url'),
      type:            'POST',
      autoUpload:       true,
      formData:         $('#fileupload').data('form-data'),
      paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
      dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
      replaceFileInput: false,
      singleFileUploads: false,
      processQueue: [
          {
              action: 'loadImage',
              fileTypes: /^image\/(gif|jpeg|png)$/,
              maxFileSize: 20000000 // 20MB
          },
          {
              action: 'resizeImage',
              maxWidth: 1920,
              maxHeight: 1200
          },
          {action: 'saveImage'},
          {action: 'duplicateImage'},
          {
              action: 'resizeImage',
              maxWidth: 1280,
              maxHeight: 1024
          },
          {action: 'saveImage'},
      ],

      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progressBar.css('width', progress + '%')
      },
      start: function (e) {
        submitButton.prop('disabled', true);

        progressBar.
          css('background', 'green').
          css('display', 'block').
          css('width', '0%').
          text("Loading...");
      },
      done: function(e, data) {
        submitButton.prop('disabled', false);
        progressBar.text("Uploading done");

        // extract key and generate URL from response
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '//' + $('#fileupload').data('host') + '/' + key;

        // create hidden field
        var input = $("<input />", { type:'hidden', name: $('#fileupload').attr('name'), value: url })
        $('#fileupload').append(input);
      },
      fail: function(e, data) {
        submitButton.prop('disabled', false);

        progressBar.
          css("background", "red").
          text("Failed");
      }
    });
    $.blueimp.fileupload.prototype.processActions.duplicateImage = function (data, options) {
        if (data.canvas) {
            data.files.push(data.files[data.index]);
        }
        return data;
    };
  });
});

form.data('url') 和 for.data('form-data') - 通过 AWS ruby gem 生成的预签名 POST 在控制器中准备。

【问题讨论】：

标签： jquery ruby-on-rails amazon-s3 upload jquery-file-upload

【解决方案1】：

我自己的解决方案不是很好，但它有效 - 添加 submit 回调：

  singleFileUploads: true,
  submit: function (e, data) {
    if (data.files.length > 1) {
      original_file = data.files[1]
      thumbnail = data.files[0]
      thumbnail.name = 'thumbnail_'+thumbnail.name
      data.files = [thumbnail];
      data.submit();
      data.files = [original_file]
    }
  }

希望以后有人能写出正确的做法。

【讨论】：