Dropzone processQueue 没有做任何事情

问题描述

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

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

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

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

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",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','crop'); })

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

// zoom buttons
$('.zoom-in').on('click',function() { $image.cropper('zoom',0.1); })
$('.zoom-out').on('click',-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;
};

解决方法

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

修复很简单：

acceptedFiles: '.jpg,.jpeg',