Question

这是我的第一篇文章，所以要温柔！我是Rails的初学者，对JavaScript / JQuery很无能为力......

我有一个Rails项目，要求用户能够选择一个文件并显示预览图像，然后他们可以按照自己的意愿裁剪，然后再异步上传裁剪后的图像。

我已使用JQuery FileUpload插件成功实现了直接上传到S3（在this教程之后），并且我能够向用户展示他们可以使用Cropper.js裁剪的预览图像。但是，在上传裁剪的图片的最后一步时，我需要帮助。

这是我到目前为止处理图像裁剪/上传到S3的JS：

$(document).ready(function() {
  $('.directUpload').find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    var form         = $(fileInput.parents('form:first'));
    var submitButton = form.find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);

    fileInput.fileupload({
      fileInput:        fileInput,
      url:              form.data('url'), //read AWS config via form attributes
      type:             'POST',
      autoUpload:       false, // prevent upload start on file selection
      formData:         form.data('form-data'), 
      paramName:        'file', 
      dataType:         'XML',  
      replaceFileInput: false,

上面的代码初始化JQuery FileUpload并传递我的S3配置数据。

接下来，我使用JQuery FileUpload的“add”回调来显示预览图像/裁剪框，并在用户点击“上传”按钮时将图像上传到S3：

add: function (e, data) {
  if (data.files && data.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#preview_image').attr('src', e.target.result); // insert preview image
      $('#preview_image').cropper() // initialize cropper on preview image
     };
   reader.readAsDataURL(data.files[0]); 
  };

  $('#upload_image').on('click', function(){
    $('#preview_image').cropper('getCroppedCanvas').toBlob(function (blob){
      var croppedFile = new File([blob], 'cropped_file.png')
      // How do I now get my cropped file data to upload instead of original file?
    })
    data.submit();
  });
},

这是上面的最后一部分，我现在卡住了 - 我已经从裁剪区域创建了一个文件，但是无法找到上传它而不是原始图像的方法。

剩下的代码主要处理显示上传进度和构建图像URL，我可以保存到我的数据库进行图像检索。

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

  start: function (e) {
    submitButton.prop('disabled', true); //disable submit button while image is loading

    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 from S3 XML response and generate URL for image
    var key   = $(data.jqXHR.responseXML).find("Key").text();
    var url   = '//' + form.data('host') + '/' + key;

    // create hidden field containing image URL, which can then be stored in model
    var input = $("<input />", { type:'hidden', name: 'image_url[]', value: url })
    form.append(input);
  },

  fail: function(e, data) {
    submitButton.prop('disabled', false);

    progressBar.
      css("background", "red").
      text("Failed");
  }
});

Answer 1

这对我有用

var croppedFile = new File([blob], 'cropped_file.png');    
data.files[0] = croppedFile;
data.originalFiles[0] = data.files[0];

或只是

data.files[0] = new File([blob], 'cropped_file.png');
data.originalFiles[0] = data.files[0];

然后

data.submit()

使用Cropper.js手动裁剪后，将图像直接上传到S3

1 个答案: