如何初始化 DropZone.js 使其正常工作？

Question

我的HTML:

<form action="" class="dropzone">
    <div id="pck_Dropzone" class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

我的 JS：

Dropzone.autoDiscover = false;

$(function(){
    var dropZone = new Dropzone("div#pck_Dropzone", {
        url: '/api/admin/UploadPackageImage',
        dictDefaultMessage: "Drag & Drop Images",
        clickable: true,
        enqueueForUpload: true,
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        maxFiles: 100,
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
        uploadMultiple: true,
        autoProcessQueue: false,
        thumbnailWidth: 240,
        thumbnailHeight: 240,
        init: function(){
            console.log('init');
        }
    });
});

我知道 dropzone 已附加到我的 DOM 元素。但它的行为与文档中演示和描述的行为并不接近。

除了 init 函数，没有其他事件会触发。根据文档，我尝试在控制台记录 'addedfile' 事件。没用。
当我添加多个文件并调用 getQueuedFiles() 函数时，没有返回任何内容。
从未生成图像预览文件。从未显示任何删除链接。
拖放不起作用。拖放图像只是替换浏览器当前显示的页面（默认浏览器行为）。
没有显示 dictDefaultMessage 'Drag & Drop Images'。只有在我初始化表单而不是 div.

我使用的是来自 cloudflare cdn 的 5.5.1 版本。它与 github.

的最新版本相同

Stack Overflow 中充斥着有关如何使用此插件的示例。我尝试了很多代码示例。这一切都无济于事。

My dropzone looks like this.

没有预览。不用排队。没有开始上传的按钮。什么都没有。

我可能做错了什么？

Answer 1

我的错误是将它放在 VueJS 应用程序中。当放在它外面时，它会立即起作用。

如何初始化 DropZone.js 使其正常工作？

How To Initialize DropZone.js To Get It Working Properly?

javascript

dropzone.js