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

Posted 2023-05-08

【中文标题】手动添加文件时的Vue2-Dropzone流程表单

【英文标题】：Vue2-Dropzone process form when files manually added

【发布时间】：2021-01-16 11:27:32

【问题描述】：

手动加载文件时是否可以手动处理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() 不起作用。它仅在我删除并重新添加文件或添加第二个文件时才有效。就好像它无法识别已添加的文件一样。是否手动添加文件仅用于显示而不是实际添加文件？

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

【问题讨论】：

我不确定这是否是您的问题，因为您引用了两个不同的组件。在挂载this.$refs.myVueDropzone 上提交this.$refs.myDropzone

对不起，我更正了，这是一个错字。

选项里有autoProcessQueue: false

是的，autoProcessQueue 设置为 false。然后我将文件设置为：this.$refs.myVueDropzone.manuallyAddFile(size: photo.size, name: photo.name, type: photo.type, photo.url);

更多信息：this.$refs.myVueDropzone.dropzone.files.length 显示 1，但 getQueuedFiles() 不返回任何内容。

【参考方案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>

【讨论】：

感谢您确认我怀疑它添加了文件但没有要处理的内容。我找到了this question/answer，这是我所希望的，但这些解决方案都不起作用，所以我认为您的解决方案可能是处理它的最简单方法。

本质上就是这样做的，就是检查是否有文件，如果有则上传，如果没有则提交表单。以这种方式这样做为开发人员提供了清晰的关注点分离。保存表单，检查uploadQueue，提交表单，以及处理上传成功或失败的可选方法。

仅供参考，这是一个简化版本，说明我如何在每周处理 1000 个文件上传的项目中使用 dropzone。