当没有新图像添加到 Dropzone 时，processQueue 不起作用

Question

我将 Dropzone 合并到我的表单中，其中包含其他数据。对于创建过程，它运行良好。图片可以拖放到Dropzone框内，当点击“Save_button”时，图片将连同其余的表单数据一起提交。

我也使用同一个页面，用于编辑过程，以允许用户编辑提交的图像和其他相关数据。上传的图片通过下面的代码块“上传图片屏蔽”拉取并显示在Dropzone中。

问题出现在这里。如果用户没有在 Dropzone 中添加任何新图像，则单击“Save_button”不会获取要上传的表单！我认为 processQueue 没有做任何事情，因为图像队列是空的，因此没有提交表单。

问题：有没有办法强制提交表单？比如触发“sendingmultiple”事件，让其他表单数据可以提交？

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop images here to upload<br>(.jpg, .jpeg, .gif, .png)";

Dropzone.options.myDropzone = {
url: '/addpage',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: '.png,.jpg,.jpeg,.gif',
addRemoveLinks: true,
init: function () {
   dzClosure = this;
   myDropzone1 = this;

   //Block with uploaded images, start
   var imagesList = ["http://www/path/to//image1.jpg"]
   
   for (var i = 0; i < imagesList.length; i++) {
       var mockFile = { id: i, name: "Image " + i, filename: imagesList[i], size: 1, type: "image/jpg", status: Dropzone.QUEUED, accepted: true, upload: {} };
       myDropzone1.emit("addedfile", mockFile);

       myDropzone1.createThumbnailFromUrl(mockFile, imagesList[i], "", "");
       myDropzone1.files.push(mockFile);
       myDropzone1.emit("complete", mockFile);
   }
   //Block with uploaded images, end

   document.getElementById("Save_button").addEventListener("click", function (e) {

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

       var success = true;

       if (!someFormValuesValidation())
           success = false;

       if (!success) {
           alert("Form validation failed, please check values.");
           return false;
       }
       else {
           dzClosure.processQueue();
       }
   });

   this.on("sendingmultiple", function (data, xhr, formData) {
       $('#loading').show();

       formData.append("Title", jQuery("#Title").val());
       formData.append("Price", jQuery("#Price").val());
       formData.append("Quantity", jQuery("#Quantity").val());
   });

   this.on("successmultiple", function (file, result) {
       if (result.Response == "0") {
           alert("Success!");
       } else {
           alert("There is a problem: " + result.Error);
       }
       file.status = Dropzone.QUEUED;
       myDropzone1.status = Dropzone.QUEUED;

       $('#loading').hide();
   });

   this.on("maxfilesexceeded", function (file) {
       this.removeFile(file);
       alert("Can't add more images. Maximum only 5 images");
   });

}
}

<form action="/addpage" autocomplete="off" id="Form" method="post" enctype="multipart/form-data">
<div class="dropzone" id="my-dropzone">
    <div class="fallback">
    <input name="Images" type="file" multiple />
    </div>
</div>
<button type="button" class="save-btn" id="Save_button">Save</button>
</form>

Answer 1

我认为processQueue 没有做任何事情，因为图像队列是 为空，因此不提交表单。

是的，队列确实是空的——在浏览器控制台上运行console.log( myDropzone1.getQueuedFiles() )，你会得到一个空数组（[]）。

有没有办法强制提交表单？

在您的mockFile 中，将status 设置为Dropzone.QUEUED：

var mockFile = { ..., status: Dropzone.QUEUED, ... };

而mockFile 需要有一个upload 项，可以简单地为{}，如下所示：

var mockFile = { ..., status: Dropzone.QUEUED, accepted: true, upload: {} };

更新

前面的答案实际上是为了简单地提交表单没有二进制图像数据 - 即QUEUED状态和upload项目只有使“保存”按钮起作用。

但是，如果您确实打算将 imagesList 数组中的所有图像上传回，那么 mockFile 应该是有效的 File 对象/实例，我会使用 Dropzone.prototype.addFile() 将文件添加到拖放区。

因此，您的 for 循环可以很简单：

for (var i = 0; i < imagesList.length; i++) {
  let name = imagesList[i];
  name = name.substring(name.lastIndexOf('/') + 1);

  fetch(imagesList[i])
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      myDropzone1.addFile(file);
    });
}

Answer 2

感谢您的帮助，根据这里的想法，我构建了以下对我有用的解决方案：

$.get(
  'attachments/actions/fetch-attachments.php',
  {
    parentdirectory: $fromparentdirectory,
    directory: $fromdirectory,
  },
  function (data) {
    var $files = [];
    $.each(data, function (key, row) {
      $files.push({
        name: row.name,
        size: row.size,
        dir: row.dir,
      });
    });

    if ($files) {
      for (var i = 0; i < $files.length; i++) {
        let mockFile = {
          name: $files[i].name,
          size: $files[i].size,
          dataURL: $fromparentdirectory + $fromdirectory + $files[i].name,
          status: Dropzone.QUEUED,
          accepted: true,
          upload: {},
        };

        var ext = $files[i].name.split('.')[1];
        if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
          var thumbnail = 'attachments/file.png';
        } else {
          var thumbnail = $fromparentdirectory + $fromdirectory + $files[i].name;
        }

        let name = $files[i];
        name = $files[i].dir + $files[i].name;

        console.log(name);

        fetch(name)
          .then((res) => res.blob())
          .then((blob) => {
            let file = new File([blob], name, blob);
            thisDropzone.addFile(file);
          });
      }
    }
  },
);

Answer 3

我正在使用 v6，@Sally CJ 的回答需要一点技巧。我希望它可以帮助处于相同情况的任何人（我使用的是最小版本）。

替换： b.append(T.name,T.data

与：if (typeof T.data.upload.uuid == 'undefined'){ T.data = new Blob(); }

我收到一条错误消息，提示 append 的第二个参数不是 Blob，这已修复。