Javascript 我怎样才能解决这个问题；Dropzone已附加”字样；错误？

我有这个样本：

我设法创建了这个表单，但不幸的是，它无法工作，因为我得到了错误

Dropzone already attached.

代码HTML:

<div class="dropzone dz-clickable" id="myDrop">
  <div class="dz-default dz-message" data-dz-message="">
    <span>Drop files here to upload</span>
  </div>
</div>

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

我设置了

Dropzone.autoDiscover=false但不幸的是仍然无法工作

您能告诉我是什么导致了这个问题吗？
您应该使用

var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

或

不是两者都有。基本上，您所做的是两次调用相同的东西。
当元素已经有了类
dropzone
时，也会发生此错误

<div id="dropzone" class="dropzone"></div>

<div id="dropzone" class="dropzone"></div>

但是，如果删除此选项，则由于某种原因，默认样式在Dropzone启动后将不适用。我唯一的解决方法是为该元素创建自定义样式
 全局定义以下代码将有助于：

Dropzone.autoDiscover = false;

这是我老套的解决办法。它基本上会检查dropzone是否作为DOM加载，如果没有，则会创建一个

    function dropzoneExists(selector) {
        var elements = $(selector).find('.dz-default');
        return elements.length > 0;
    }

    var exists = dropzoneExists('div#photo_dropzone');
    if(exists) return;

    $('div#photo_dropzone').dropzone({
       ...
       ...
    });

更新：建议找出dropzone启动两次的原因。解决这一问题是正确的方法，而这个答案只是一个技术上的解决方案。
在网上搜索并尝试了几种解决方案后，我得到了解决此问题的最佳解决方案之一

HTML



JavaScript

Dropzone.options.someDropzone={
url:“/file/post”
};
有时是因为您有两个相同id的html元素
dropzone

<div id="dropzone" class="dropzone"></div>

<div id="dropzone" class="dropzone"></div>

我通过编辑dropzone.js修复了这个问题。只需转到dropzone.js并替换即可

if (this.element.dropzone) {
    throw new Error("Dropzone already attached.");
  }

与

此解决方案最初由发布在
上的找到，您可以为Dropzone的每个实例使用一些唯一的值来定义您的id“myDrop”

例如：

 html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>

 in func: 
 this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);

html：
在func中：
this.myDropzone=新建Dropzone（“span#my Dropzone”+this.dropzoneId，选项）；

Dropzone.autoDiscover=false；
$（文档）.ready（函数（）{
var myDrop=new Dropzone（#myDrop）{
url:“/admin/media”
});
});

而不是

<script>
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>


$（文档）.ready（函数（）{
Dropzone.autoDiscover=false；
var myDrop=new Dropzone（#myDrop）{
url:“/admin/media”
});
});
使用Angular时，此解决方案不适用于我：

Dropzone.autoDiscover = false;

我可以让它在不必编辑
dropzone.js
文件的情况下使用Angular的唯一方法是：

@ViewChild('containerElement') containerElement: ElementRef;

...    

/* Make sure all Dropzone instances are destroyed */
if (Dropzone.instances.length > 0) {
    Dropzone.instances.forEach((e: any) => {
        e.off();
        e.destroy();
    });
}

/* Remove existing dropzone element from the DOM */
const element: any = document.getElementById('my-dropzone');
element.remove();

/* Create new dropzone DOM element */
const html =
` <div id="my-dropzone" class="dropzone">` +
    `<div class="dz-message">` +
    `<i class="fad fa-cloud-upload-alt dz-message-icon"></i>` +
    `<p>Drop files, or click to browse</p>` +
    `</div>` +
`</div>`;
this.containerElement.nativeElement.insertAdjacentHTML('beforeend', html);

@ViewChild（'containerElement'）containerElement:ElementRef；
...    
/*确保所有Dropzone实例都已销毁*/
如果（Dropzone.instances.length>0）{
Dropzone.instances.forEach（（e:any）=>{
e、 off（）；
e、 破坏（）；
});
}
/*从DOM中删除现有的dropzone元素*/
常量元素：any=document.getElementById（'my-dropzone'）；
元素。移除（）；
/*创建新的dropzone DOM元素*/
常量html=
` ` +
`` +
`` +
` 删除文件，或单击以浏览+
`` +
``;
this.containerElement.nativeElement.insertAdjacentHTML（'beforeend'，html）；
在
$（文档）之前添加
Dropzone.autoDiscover=false
。如下所示：

Dropzone.autoDiscover = false;
$(document).ready(function () {

});

转到dropzone.js并用if（n.element.dropzone）替换if（n.element.dropzone）抛出的新错误（“dropzone已附加”。）返回此.element.dropzone；
我将autoDiscover设置为false，并且我只有一个元素的类为dropzone。你知道会有什么问题吗？好的，我想出来了。问题是我已经包含了dropzone.js（来自我购买的模板），所以我只离开了一次。感谢这个简单但有效的解决方案。我认为问题在于Dropzone插件，它会自动实例化所有Dropzone实例。对于大多数插件，这通常不会发生，直到你自己实例化它。所以我们期望Dropzone也会发生同样的情况。然后，当我们实例化Dropzone时，相信它不会发生o作为唯一的实例化，我们实际上得到了两个，因为插件会自动执行一个。这就是为什么这行代码可以工作-通过关闭第一个实例化。我得到了这个错误：“未捕获错误：Dropzone已连接。”这是真正的答案。如果没有它，dropzone将使用带有.dropzone类的标记。如果你想在元素上使用与该类相同的样式和dropzone，你需要设置它，请确保在加载文档之前运行它，否则dropzone的自动发现可能会让你措手不及（@NikhilRao，我怀疑这就是你的情况）。另外请注意：不要将该行放入jQuery函数中，否则将无效。必须将该行置于所有其他操作之前运行。也不要将autoDiscover设置为false…然后当您的同事更新库时，您的应用程序会神秘地断开。我已在编辑中删除它，但您的回答以“别忘了”结尾.你想给你的答案多加一点吗？谢谢，伙计，这救了我一天
@ViewChild('containerElement') containerElement: ElementRef;

...    

/* Make sure all Dropzone instances are destroyed */
if (Dropzone.instances.length > 0) {
    Dropzone.instances.forEach((e: any) => {
        e.off();
        e.destroy();
    });
}

/* Remove existing dropzone element from the DOM */
const element: any = document.getElementById('my-dropzone');
element.remove();

/* Create new dropzone DOM element */
const html =
` <div id="my-dropzone" class="dropzone">` +
    `<div class="dz-message">` +
    `<i class="fad fa-cloud-upload-alt dz-message-icon"></i>` +
    `<p>Drop files, or click to browse</p>` +
    `</div>` +
`</div>`;
this.containerElement.nativeElement.insertAdjacentHTML('beforeend', html);

Dropzone.autoDiscover = false;
$(document).ready(function () {

});