Dropzone.js在将autoProcessQueue设置为false时只上传两个文件

Question

我使用Dropzone.js，想要用户点击按钮后再上传拖放的文件。因此，我将autoProcessQueue选项设置为false，并在按钮被点击时调用processQueue()方法。我认为现在整个队列都会被处理，但事实并非如此。只有在parallelUploads选项中指定的文件数量才会被上传。parallelUploads标准值似乎是2。也就是说每次点击会处理和上传2个文件。

那么我需要将parallelUploads设置为一个非常高的数字来解决这个问题吗？

下面是我的完整JS代码：

var myDropzone = new Dropzone("div#myId", {
  url: "http://www.torrentplease.com/dropzone.php",
  addRemoveLinks: true,
  thumbnailWidth: "80",
  thumbnailHeight: "80",
  dictCancelUpload: "Cancel",
  autoProcessQueue: false
});

myDropzone.on("drop", function(event) {
  $('.edit_tooltip .option_bar').animate({
    opacity: 1,
    top: "-5"
  });
});


$('.edit_tooltip .option_bar .button').click(function() {
  myDropzone.processQueue();
});

- Juuro

---

这是因为如果在您的选项中没有设置，parallelUploads 默认为2。 - mcometa

Answer 1

增加parallelUploads: 10（这是您的最大值）

- Venom

---

非常感谢！我花了半天时间解决这个问题，最终你的答案帮了我。 - Artur Keyan

需要明确的是，这种方法要求将 parallelUploads 设置为等于或大于 maxFiles，否则如果用户拖放超过 paralleluploads 个文件，则最后几个文件可能无法上传。Bianka下面的回答似乎更“正确”，因为它允许 parallelUploads 独立于 maxFiles 运行，就像它设计的那样。 - tohster

不确定这是最佳解决方案，如果我们想上传超过10个文件的话。 - Pete_Gore

Answer 2

这个问题有一个简单的解决方法，可以在这里找到：

https://github.com/enyo/dropzone/issues/253#issuecomment-22184190

“如果您希望第一次上传后autoProcessQueue为true，则只需侦听处理事件，并在内部设置this.options.autoProcessQueue = true;”

所以只需要添加以下代码：

this.on("processing", function() {
    this.options.autoProcessQueue = true;
});

- Bianka M.

---

因为我是从外部进程使用它来启动上传，这是我的代码：myDropzone.options.autoProcessQueue = true;我将parraleleupload设置为1，这导致每个文件逐个上传。感谢提供正确的解决方案。 - Andy

这确实使文件按顺序上传，但现在每个单独的文件都会调用操作URL！在我的例子中，使用这种解决方案，我会收到与文件数量相同的电子邮件。这不是我想要的！我希望文件按顺序上传，只有在此之后才调用操作URL。这可能吗？ - gota

Answer 3

我的解决方案是：

// init dropzone with auto process queue false
var adPhotosDropzone = new Dropzone("#dropzone", {
    autoProcessQueue: false,
    parallelUploads: 3
});

$(document).on('click', '#btnUpload', function () {
    // enable auto process queue after uploading started
    adPhotosDropzone.options.autoProcessQueue = true;
    // queue processing
    adPhotosDropzone.processQueue();
});

// disable queue auto processing on upload complete
adPhotosDropzone.on("queuecomplete", function() {
    adPhotosDropzone.options.autoProcessQueue = false;
});

- Viktor Sanzharevskyy

---

这对我有用，因为我有一个触发上传的事件。在processQueue()之前设置autoProcessQueue=true似乎解决了问题。 - Daniel Kim

Answer 4

可能已经晚了，但愿我的翻译能够帮到某些人。

我注意到把maxFilesSize放在parallerUploads上面时它不起作用。

因此，选项的顺序应该是这样的。

.
.
parallelUploads: 20,    
maxFilesize: 2, 
maxFiles: 20,
.
.

- m.qayyum

---

maxFilesize是允许上传的最大文件大小（以字节为单位）。这与此处的主题无关。 - Fumisky Wells

Answer 5

添加两个超额驱动事件：

处理 -> 允许上传所有文件

队列完成 -> 返回正常

    init: function () {

            this.on("queuecomplete", function () {
                this.options.autoProcessQueue = false;
            });

            this.on("processing", function () {
                this.options.autoProcessQueue = true;
            });

    };

- Ahmad Aghazadeh

Answer 6

我使用了带有选项（autoProcessQueue:false）的此Dropzone，但它只上传了两个文件而不是我的所有文件。我在git的问题中找到了一种解决方法 oligoil's answer。

这个想法非常简单（因为我们想逐个上传文件，记住这个选项！ :D ）。它可以上传多个文件，但限制为1个，上传一个文件后会触发下一个队列！

希望它能够帮助某些人！

以下是使用该想法的代码（因为我有2个表格要上传，在上传所有图像后，它将提交其他表格）。

Dropzone.options.dropzoneForm = {
        paramName: "file", // The name that will be used to transfer the file
        autoProcessQueue: false,
        addRemoveLinks:true,
        parallelUploads : 1,
        maxFiles : 50,
        autoProcessQueue : false,
        autoQueue : true,
        dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
        init: function () {
            ....

            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    console.log("END ", this.getQueuedFiles().length);
                }
                else {
                    Dropzone.forElement("#dropzoneForm").processQueue();
                }
            });
        }
    };

- Akbar Noto

Answer 7

如果您不想设置maxFiles（默认无限制），并使用所需的parallelUploads值，那么请阅读以下内容！

我通过设置解决了问题行为。

autoQueue: false,
autoProcessQueue: true,

那么当我想上传文件时，我只需使用以下命令将它们添加到队列中：

myDrop.enqueueFile(file)

但是，这种方法只能接受一个文件，对于多个文件，我使用以下方法：

myDrop.on("addedfiles", function(files){
 //wait confirmation, or do some processing with the files, then:

 files.forEach(function(file){
    myDrop.enqueueFile(file)
 })
}

请注意，“addedfiles”事件目前尚未在文档中记录。它捕获拖放到dropzone中的所有文件或通过单击事件添加的所有文件。

这很好，因为如果您正在使用“sending”事件来添加POST数据，或者使用“parallelUploads”，则示例代码可以正常工作，并且不会干扰下一个文件。我正在使用Sweet Alert 2在上传图像之前要求一些标签。

- user11897373

Answer 8

有点晚了，但我对其他答案不满意，所以这是我的答案。

在点击发送后更改autoProcessingQueue（即使是暂时的）意味着如果您在其他文件仍在排队上传时向dropzone添加另一个文件，则它将被上传而无需再次按下发送按钮，这不是我想要的。我也不想使用setTimeout或busyloop。因此，以下是如何在没有两者的情况下完成它：

修改dropzone.js文件。首先，在Dropzone函数中，您需要添加第二个文件数组以存储按下发送按钮时的队列：

function Dropzone(element, options) {
  ...
  this.files = [];
  this.files2 = [];

然后，通过修改processQueue，在点击发送时将文件保存到其中

Dropzone.prototype.processQueue = function() {
  this.files2 = this.getQueuedFiles();
  ...

最后，编辑“_finished”函数，以便在文件上传完成后，如果按下发送时队列中仍有剩余文件，则发送另一个文件：

Dropzone.prototype._finished = function(files, responseText, e) {
  var file, _i, _len;
  for (_i = 0, _len = files.length; _i < _len; _i++) {
    file = files[_i];
    file.status = Dropzone.SUCCESS;
    this.emit("success", file, responseText, e);
    this.emit("complete", file);
    this.files2 = this.files2.filter(function(e) { return e.status == "queued" }); // Remove the files that are finished or already being uploaded
  }
  if (this.options.uploadMultiple) {
    this.emit("successmultiple", files, responseText, e);
    this.emit("completemultiple", files);
  }
  if (this.options.autoProcessQueue) {
    return this.processQueue();
  }
  else {
      if (typeof this.files2 != "undefined" && this.files2.length > 0) {
          this.processFiles(this.files2.slice(0,1)); // process the next file if there's one
      }
  }
};

- Dino

Answer 9

我认为你可以允许上传多个文件并更改dropzone.js文件。

首先，允许上传多个文件。接下来，将这行代码更改为dropzone.js：

return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));

替换为

return this.processFiles(queuedFiles.slice(0, queuedFiles.length));

- user2938512

Answer 10

这对我解决了问题，而不需要更改任何dropzone.js代码或使parallelUploads设置无效。

$('#submit').click(function(e){
  e.preventDefault();

  function tryQueue(){
    var numQueued=dz.getQueuedFiles().length;
    var numFiles=numQueued+dz.getUploadingFiles().length;
    if(numQueued>0){
      dz.processQueue();
    }
    if(numFiles>0){
      setTimeout(tryQueue,1000);
    }
    else window.location='/'; //redirect when finished
  }
  tryQueue();
});

假设dz是dropzone实例。它通过调用processQueue来上传所有内容。processQueue中的逻辑会处理如果没有需要处理的内容则返回，因此轮询不会造成任何伤害。

- Alex