手动添加文件时的Vue2-Dropzone处理表单

如何解决手动添加文件时的Vue2-Dropzone处理表单

手动加载文件时是否可以手动处理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（）无效。仅当我删除并重新添加文件或添加第二个文件时，它才有效。好像无法识别已添加文件。手动添加文件仅用于显示而不实际添加文件吗？

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

解决方法

经过对Vue2 Dropzone的一些研究

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

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>