jQuery文件上传：如何为每个文件大小发送单独的请求

Question

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

如果上传原始文件或重新调整文件大小，则可以正常工作。同样适用于多项选择。

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

如果尝试上载一幅图像的多种分辨率，则返回错误消息“ 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红宝石gem生成的预签名POST在控制器中准备。

Answer 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]
    }
  }

希望以后有人会写出正确的方法。