手动添加文件时的Vue2-Dropzone流程表单

Question

手动加载文件时是否可以手动处理dropzone表单（或队列）？

我们有驾照的概念。用户上传照片并输入其他信息，例如许可证号、到期日期等。用户单击保存按钮，我调用 processQueue() 提交整个表单。这一切都很好。

接下来，我们使用编辑按钮以非表单方式显示此许可证。当他们单击“编辑”按钮时，我再次显示表单并使用先前输入的数据填充字段，包括手动添加先前提交的许可证照片。文档中基本上是这样的：

mounted: () {
    var file = { size: 300, name: "Icon", type: "image/png" };
    var url = "https://example.com/img/logo_sm.png";
    this.$refs.myVueDropzone.manuallyAddFile(file, url);
}

这似乎按预期工作。我看到带有先前上传文件的缩略图的 dropzone。输入字段都填充了以前输入的数据。

当我尝试再次处理此表单时出现问题：

onSubmit() {
    this.$refs.myVueDropzone.processQueue()
}

如果他们只更改许可证号等输入字段而不上传新文件，则 onSubmit() 或 processQueue() 不起作用。它仅在我删除并重新添加文件或添加第二个文件时才有效。就好像它无法识别已添加的文件一样。是否手动添加文件仅用于显示而不是实际添加文件？

手动添加文件时如何提交此表单？

Answer 1

经过对 Vue2 Dropzone 的一些研究

手动添加文件 使用manuallyAddFile 方法允许您以编程方式将文件添加到您的放置区。例如，如果您的服务器上已经有文件想要预先填充您的 dropzone 区域，那么只需在触发 vdropzone-mounted 事件时使用该函数。

source

因此，解决方案是检查队列中是否需要处理任何内容。由于您手动添加了已有的文件，因此无需再次上传。只有当用户添加新文件时才需要上传。

您可以通过几种方式做到这一点，但为了简单起见，我建议您使用以下示例：

onSubmit() {
  if (this.$refs.myVueDropzone.getQueuedFiles().length) {
    this.$refs.myVueDropzone.processQueue()
  }
}

如果您需要等到队列完成处理才能发送您的表单，您可以利用 vdropzone-queue-complete。下面是一个简单的例子：

<template>
  <!-- SOME FORM ELEMENTS HERE -->
  <vue-dropzone
    ref="myVueDropzone"
    :options="dropzoneOptions"
    @vdropzone-error="errorUploading"
    @vdropzone-success="fileUploaded"
    @vdropzone-queue-complete="submitForm"
  />
  <button @click="saveForm">Save</button>
</template>
<script>
  export default {
    methods: {
      saveForm () {
        if (this.$refs.myVueDropzone.getQueuedFiles().length) {
          this.$refs.myVueDropzone.processQueue()
        } else {
          this.submitForm()
        }
      },
      errorUploading (file, message, xhr) {
        // do something when a file errors
        // perhaps show a user a message and create a data element to stop form from processing below?
      },
      fileUploaded (file, response) {
        // do something with a successful file upload. response is the server response
        // perhaps add it to your form data?
      },
      submitForm () {
        // Queue is done processing (or nothing to process), you can now submit your form
        // maybe check for errors before doing the below step
        // do what ever you need to submit your form this.$axios.post(...) etc.
      }
    }
  }
</script>