如何将 dropzone 放在表单中但仍允许原始表单提交？答案

【问题标题】：How to put dropzone within a form but still allow the original form to submit?如何将 dropzone 放在表单中但仍允许原始表单提交？
【发布时间】：2019-03-24 10:15:23
【问题描述】：

我有一个表格，我想在里面放一个拖放区。

我不想将图像与主表单一起提交，因为我会将它们的详细信息存储在 Session 中，然后在提交表单时将文件名和其他详细信息存储在数据库中。

但是，将 Dropbox 放在表单中会使提交按钮停止工作。

我正在 Vue 组件中的 div 中创建 dropzone：

<div :id='"dropzoneform" + this._uid' class="dropzone">

然后以编程方式实例化它：

var form = this.$el;
this.dropzone = new Dropzone(form, {
  url: this.postUrl,
  headers: this.headers,
  // ...more settings...
}

自动检测也是错误的：

Dropzone.autoDiscover = false;

dropzone 可以正常工作，它会按预期上传文件。但我无法提交他们所在的表单。我单击按钮但没有任何反应。

知道我哪里出错了吗？

编辑：这是按钮代码：

<button type="submit" class="booking-submit" name="button" @click.prevent="submit">Continue</button>

提交功能有很多东西来检查表单是否已正确填写，并以：

if (submittable) {
  $('#form').submit();
}

我已经在其中添加了一个 console.log 来确认它是否到达那里，它确实到达了那里。在我放入 dropzone 之前，此表单也有效。

【问题讨论】：

你有你的按钮和点击方法的代码吗？
我也想看看完整的html表单。
@varborb 谢谢我已经编辑了答案
您的提交功能在哪里？你确定要输入吗？你在 if 里面做了 console.log 吗？
@Erubiel 是的，我已经 console.logged if 并且它肯定会到达那里

标签： javascript vue.js dropzone

【解决方案1】：

我假设您使用的是 vue2-dropzone

您需要将 autoProcessQueue 选项设置为 false。

https://www.dropzonejs.com/#config-autoProcessQueue

然后您可以在发送前获取文件：this.$refs.myVueDropzone.files

myVueDropzone 是您实际提供的 ref...

如果这不起作用，请尝试：this.$refs.myVueDropzone.dropzone.files

【讨论】：

这会阻止 dropzone 上传文件，并且仍然不允许我提交表单。