Dropzone.js vue-js-modal 中未显示

Question

在一个项目中，我使用 euvl 的 vue-js-modal 插件和 dropzone.js 进行多个文件上传。

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

不幸的是，我没有在控制台上收到错误消息，但是文件上传 window 打不开，也无法拖放文件。

这是我的 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>

这就是我在 laravel blade 文件中使用 vue 组件的方式：

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

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

Answer 1

我认为你应该在模式打开后初始化 Dropzone。

例子

Dropzone.autoDiscover = false;

const VModal = window["vue-js-modal"].default;

Vue.use(VModal)

const dropForm = Vue.component('drop-form', {

  template: `<div class="content">
  <modal name="modal" @opened="afterOpen">
    <div ref="dropZoneRef" class="dropzone"></div>
  </modal>
  <button @click="showModal()">Upload files</button></div>`,
  methods: {
    showModal() {
      this.$modal.show('modal')
    },
    afterOpen() {
      const dropZone = new Dropzone(this.$refs.dropZoneRef, {
        url: "/file/post"
      });
    }
  },
  mounted() {
  }
});

new Vue({
  el: '#root',
  template: `<drop-form></drop-form>`
})

.content {
  padding: 1rem;
  border: 1px solid black;
  height: 200px;
}

#dropZone {
  height: 100px
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/basic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<script src="https://unpkg.com/vue-js-modal@2.0.0-rc.3/dist/index.js"></script>
<div id="root"></div>

Dropzone.js vue-js-modal 中未显示

Dropzone.js not showing in vue-js-modal

javascript

laravel

dropzone.js

vue.js