2

我正在尝试使用 Jquery File Upload gem 将单个文件的多个大小版本直接上传到 AWS S3。

此代码正确上传传递给输入的文件：

$('#file_upload').find("input:file").each(function(i, elem) {
  var fileInput    = $(elem);
  var form         = $(fileInput.parents('form:first'));
  fileInput.fileupload({
    fileInput:       fileInput,
    url:             form.data('url'),
    type:            'POST',
    autoUpload:       true,
    formData:         form.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,
    disableImageResize: false,
    singleFileUploads: false,
    sequentialUploads: true,
    imageCrop: true,
    processQueue: [
          {
              action: 'loadImage',
              fileTypes: /^image\/(gif|jpeg|png)$/,
              maxFileSize: 20000000 // 20MB
          },
          {
              action: 'resizeImage',
              maxWidth: 400,
              maxHeight: 400
          },
          {action: 'saveImage'}
      ],
      processstart: function (e) {
          console.log('Processing started...');
      },
      process: function (e, data) {
          console.log('Processing ' + data.files[data.index].name + '...');
      },
      processdone: function (e, data) {
          console.log('Processing ' + data.files[data.index].name + ' done.');
      }
  }); //fileupload

我也想上传相同的图像，但调整为 200x200。我遵循了 gem 文档https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-multiple-resolutions-of-one-image-with-multiple-resize-options并编写了以下 processQueue

processQueue: [
          {
              action: 'loadImage',
              fileTypes: /^image\/(gif|jpeg|png)$/,
              maxFileSize: 20000000 // 20MB
          },
          {
              action: 'resizeImage',
              maxWidth: 400,
              maxHeight: 400
          },
          {action: 'saveImage'},
          {action: 'duplicateImage'},
          {
              action: 'resizeImage',
              maxWidth: 200,
              maxHeight: 200
          },
          {action: 'saveImage'},
      ],

并添加了 duplicateImage 操作。

$.blueimp.fileupload.prototype.processActions.duplicateImage = function (data, options) {
  if (data.canvas) {
    data.files.push(data.files[data.index]);
  }
  return data;
};

问题：第一个saveImage在复制之前没有上传第一个图像。相反，两个文件只发出一个 POST 请求，这会返回错误POST 需要每个请求只上传一个文件。

有没有办法一个接一个地处理文件？

知道我错过了什么吗？

4

0 回答 0