手动添加文件时的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);
}

这似乎符合预期。我看到带有先前上传文件缩略图的拖放区。输入字段全部填充了以前输入的数据。

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

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

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

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

Answer 1

在对 Vue2 Dropzone 进行一些研究之后

手动添加文件 使用 manuallyAddFile 方法允许您以编程方式将文件添加到您的拖放区。例如，如果您的服务器上已经有您想要 pre-populate 您的 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>

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

Vue2-Dropzone process form when files manually added

vue.js

dropzone

vue2-dropzone