Javascript Dropzone.js未显示在vue js模式中

在一个项目中，我使用euvl和dropzone.js提供的vue js模式插件进行多文件上传

我知道我想合并这两个库，让用户打开一个模式并上传文件。不幸的是，看起来dropzone.js库没有正确初始化，模式弹出，但我无法通过dropzone容器上传照片

不幸的是，我没有在控制台上得到一个错误，但是文件上传窗口没有打开，拖放文件也是不可能的

这是我的vue组件文件：

<template>
<modal name="upload-files-modal" classses="p-4 bg-card rounded-lg" height="auto">
        <div class="card mt-3">
        <h3 class="font-normal text-xl py-4 -ml-5 mb-3 border-l-4 border-blue-light pl-4">
           Upload some pictures
        </h3>
            <form id="newForm" method="POST" action="" class="dropzone" >
            </form>
        </div>
</modal>
</template>

<script>
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'

Dropzone.autoDiscover = false;
Dropzone.options.newForm = {
        paramName: 'photo',
        maxFilesize: 3,
        acceptedFiles: '.jpg, .jpeg, .png .bmp',
        init: function () {
        // Set up any event handlers
        this.on('queuecomplete', function (file) {
                location.reload();
        });
    }
}

export default {
    props: ['uploadurl']
}
</script>

上传一些图片
从“Dropzone”导入Dropzone
导入“dropzone/dist/dropzone.css”
Dropzone.autoDiscover=false；
Dropzone.options.newForm={
paramName:'照片'，
最大文件大小：3，
接受的文件：'.jpg、.jpeg、.png.bmp'，
init：函数（）{
//设置任何事件处理程序
this.on（'queuecomplete'，函数（文件）{
location.reload（）；
});
}
}
导出默认值{
道具：['uploadurl']
}

以下是我在laravel刀片文件中使用vue组件的方式：

<upload-files-modal uploadurl="{{ $project->path() . '/photos' }}" ></upload-files-modal>

<a href="" @click.prevent=$modal.show('upload-files-modal')>Upload Photo</a>

---

我认为您应该在打开modal后初始化

Dropzone

示例

Dropzone.autoDiscover=false；
const VModal=window[“vue js model”]。默认值；
Vue.use（VModal）
常量dropForm=Vue.component（'drop-form'{
模板：`
上传文件`，
方法：{
showModal（）{
此.$modal.show（'modal'）
},
后开式{
const dropZone=新dropZone（此.$refs.dropZoneRef{
url:“/file/post”
});
}
},
安装的（）{
}
});
新Vue({
el:'根'，
模板：``
})

.content{
填充：1rem；
边框：1px纯黑；
高度：200px；
}
#下降区{
高度：100px
}