vue.js - Vue Dropzone：在一个 POST 中从多个实例发送文件

Question

我正在使用 Vue Dropzone ( https://github.com/rowanwins/vue-dropzone )，并且我的页面之一对于同一页面的不同部分有多个 dropzone 实例。我关闭了，autoProcessQueue以便在将它们添加到 dropzone 后它们不会自动上传。我给每个实例一个ref，以便我可以processQueue手动调用，但是有没有办法可以在 POST 中发送它们而不是 3 个单独的调用？

<vue-drop-zone ref="myVueDropzone1" id="dropzone" :options="dropzoneOptions">
</vue-drop-zone>

<vue-drop-zone ref="myVueDropzone2" id="dropzone" :options="dropzoneOptions" >
</vue-drop-zone>

<vue-drop-zone ref="myVueDropzone3" id="dropzone" :options="dropzoneOptions" >
</vue-drop-zone>


data() {
   return {
       dropzoneOptions: {
                    url: '/url/post',
                    thumbnailWidth: 180,
                    maxFilesize: 2, // MB
                    maxFiles: 1,
                    autoProcessQueue: false,       
        },
   }
}

methods: {
    processBtn: function() {
          this.$refs.myVueDropzone1.processQueue();
          this.$refs.myVueDropzone2.processQueue();
          this.$refs.myVueDropzone3.processQueue();
    } 
}

Answer 1

您必须调用getAcceptedFiles()每个组件来获取文件，然后自己处理它们（XHR 帖子），然后调用removeAllFiles().