如何初始化 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 元素。但它的行为与文档中的演示和描述不符。

1. 除了 init 函数，没有其他事件会触发。根据文档，我尝试控制台记录“添加文件”事件。它不起作用。

2. 当我添加多个文件并调用 getQueuedFiles() 函数时，没有返回任何内容。

3. 从未生成图像预览文件。从未显示任何删除链接。

4. 拖放不起作用。拖放图像只是替换浏览器当前显示的页面（默认浏览器行为）。

5. dictDefaultMessage“拖放图像”未显示。那个只有在我初始化表单而不是 div 时才会显示。

我使用的是 cloudflare cdn 的 5.5.1 版本。它与github的最新版本相同。

Stack Overflow 有很多关于如何使用这个插件的例子。我尝试了许多代码示例。这一切都没有做任何事情。

My dropzone looks like this.

没有预览。没有排队。没有按钮开始上传。没什么。

我可能做错了什么？

Answer 1

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