Dropzone未读取配置不生效，按官方文档配置后功能无响应

问题排查点 #

• 配置加载顺序错误
  Dropzone 会在库加载完成后自动扫描页面中带dropzone类的元素完成初始化，你的配置代码必须放在Dropzone库加载之前执行，才能被自动初始化的实例读取。如果配置写在Dropzone库加载之后，Dropzone已经完成初始化，配置自然不生效。
  如果你不想调整加载顺序，可以在配置前先关闭自动发现：

  Dropzone.autoDiscover = false;
  // 后面再写你的配置，或者手动初始化实例
  

• 手动初始化冲突
  Dropzone.options.xxx的配置仅对Dropzone自动初始化的实例生效，如果你代码其他位置手动调用了new Dropzone("#upload-form", {})初始化该表单，需要把配置直接写到手动初始化的参数里，options配置不会生效。
• 表单缺少必填属性
  你的form标签未配置action属性，即使autoProcessQueue设为false，部分版本的Dropzone初始化时会校验提交地址，缺失会导致初始化失败。同时你开启了uploadMultiple: true，文件上传的input的name需要加[]后缀，否则后端无法接收多文件数组。
• 预览容器未指定
  你HTML中预留了.previews容器作为预览区，但Dropzone配置中没有指定previewContainer: ".previews"，默认会直接在form内插入预览元素，和你预留的结构冲突，甚至导致事件绑定异常。
• 重复的文件输入框冲突
  你手动在表单内写了<input type="file" name="file">，而Dropzone自动初始化时也会插入一个隐藏的文件输入框，两个同类型输入框会导致上传逻辑异常，要么删除你手动写的输入框，要么配置addRemoveLinks: false同时指定你自己的input作为上传入口。

修正后可用代码 #

HTML部分 #

<form id="upload-form" class="dropzone" action="/你的上传接口地址">
  <div class="previews"></div>
  <button type="submit">Submit data and files!</button>
</form>

JS部分 #

// 必须放在Dropzone库加载之前，或者先关闭自动发现
Dropzone.autoDiscover = false;
Dropzone.options.uploadForm = {
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  previewContainer: ".previews",
  paramName: "file[]", // 对应多文件上传的参数名
  init: function() {
    var myDropzone = this;
    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });
    this.on("sendingmultiple", function() {});
    this.on("successmultiple", function(files, response) {});
    this.on("errormultiple", function(files, response) {});
  }
}
// 关闭自动发现后需要手动触发初始化
new Dropzone("#upload-form", Dropzone.options.uploadForm);

内容的提问来源于stack exchange，提问作者RedHat