Dropzone processQueue 没有做任何事情

Question

我正在使用 dropzone.js 将图片上传到我的 rails 应用程序，但我想先通过 cropper.js 处理它。

我已将 autoprocessQueue 设置为 false，因此可以裁剪图像，但是当我运行 processQueue() 函数时，没有任何反应。没有错误，或任何东西。什么都没有。

dropzone 被识别并且可以在 dropzone 文件数组中看到文件，所以它在队列中，据我所知。我不确定为什么它没有发送。

单击提交按钮时会出现此问题。

var cropped = false;

  var myDropzone = new Dropzone('#cover-dropzone', {
// createImageThumbnails: true,
url: '/posts',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
acceptedFiles: 'image/jpg',
previewsContainer: document.getElementById("dz-preview-container"),
maxFiles: 1,

  // The setting up of the dropzone
init: function() {
  var currentDropzone = this;
  
  this.on('dragover', function(file){
    console.log('dragover');
    // debugger;
  });

  // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
  // of the sending event because uploadMultiple is set to true.
  this.on('addedfile', function(file) {
    if (!cropped) {
      currentDropzone.removeFile(file);
      cropper(file);
    } else {
      cropped = false;
      var previewURL = URL.createObjectURL(file);
      var dzPreview = $(file.previewElement).find('img');
      dzPreview.attr("src", previewURL);
    }
   });

  this.on("sending", function() {
    console.log('sending');
  });
  this.on("sendingmultiple", function() {
    console.log('sendingmultiple');
    // Gets triggered when the form is actually being sent.
    // Hide the success button or the complete form.
  });
  this.on("successmultiple", function(files, response) {
    // Gets triggered when the files have successfully been sent.
    // Redirect user or notify of success.
  });
  this.on("errormultiple", function(files, response) {
    // Gets triggered when there was an error sending the files.
    // Maybe show form again, and notify user of error
  });
}
});


function cropper(file) {
  $('#dz-button-container').fadeOut('fast').hide('fast');
  showCropper(file);
  $cropperDiv.show('slow');
};

function showCropper(file) {

var c = 0;
var fileName = file.name;
var loadedFilePath = getSrcImageFromBlob(file);

$('#cropper-container').html('<img id="img-' + c + '" src="' + loadedFilePath + '" data-vertical-flip="false" data-horizontal-flip="false">')

var $image = null;  

var $image = $('#img-' + c);

var cropper = $image.cropper({
    autoCropArea: 1,
    aspectRatio: 24 / 7,
    movable: true,
    rotatable: true,
    scalable: true,
    viewMode: 1,
    minContainerWidth: 250,
    maxContainerWidth: 250
});

// controller buttons
$('.move-btn').on('click', function() { $image.cropper('setDragMode', 'move'); })
$('.crop-btn').on('click', function() { $image.cropper('setDragMode', 'crop'); })

// rotate buttons
$('.rotate-r').on('click', function() { $image.cropper('rotate', 45); })
$('.rotate-l').on('click', function() { $image.cropper('rotate', -45); })

// zoom buttons
$('.zoom-in').on('click', function() { $image.cropper('zoom', 0.1); })
$('.zoom-out').on('click', function() { $image.cropper('zoom', -0.1); })

// horizontal flip toggle
var hDirection = -1
$('.flip-v').on('click', function() { 
  $image.cropper('scaleX', hDirection);
  hDirection = hDirection === -1 ? 1 : -1;
})

// vertical flip toggle
var vDirection = -1
$('.flip-h').on('click', function() { 
  $image.cropper('scaleY', vDirection); 
  vDirection = vDirection === -1 ? 1 : -1;
})

// save image
$('#save-cropped-image').on('click', function(e) {
  // get cropped image data

  e.preventDefault();
  e.stopPropagation();

  console.log('i was clicked');

  $image.cropper('getCroppedCanvas', {
    width: 90,
    height: 160,
    minWidth: 256,
    minHeight: 256,
    maxWidth: 4096,
    maxHeight: 4096,
    fillColor: '#fff',
    imageSmoothingEnabled: false,
    imageSmoothingQuality: 'high'
  }).toBlob(function(blob) {
    var croppedFile = blobToFile(blob, fileName);
    croppedFile.accepted = true;
    // debugger;
    var files = myDropzone.getAcceptedFiles();
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      if (file.name === fileName) {
        myDropzone.removeFile(file);
      }
    }
    cropped = true;

    myDropzone.files.push(croppedFile);
    myDropzone.emit('addedfile', croppedFile);
    myDropzone.createThumbnail(croppedFile); //, width, height, resizeMethod, fixOrientation, callback)

    myDropzone.processQueue();
    console.log("process one didn't work")
  });
})

}

function getSrcImageFromBlob(blob) {
  var urlCreator = window.URL || window.webkitURL;
  return urlCreator.createObjectURL(blob);
};

function blobToFile(theBlob, fileName) {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
};

Answer 1

问题是我没有正确配置 acceptedFiles 参数，文件没有通过验证，也没有进入队列，所以当调用 processqueue 函数时，没有任何东西可以处理。

修复很简单：

acceptedFiles: '.jpg,.jpeg',

Dropzone processQueue 没有做任何事情

Dropzone processQueue not doing anything

javascript

cropperjs

dropzone