如何解决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',
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。