VueJS：vue2-dropzone

Question

我用 vue2-dropzone 构建了一个拖放区，我只想显示最后一条错误消息。为了获取错误消息，我使用了方法 getRejectedFiles()，它为我提供了一个包含所有失败上传的数组。然后我使用 `v-for 循环遍历这个数组，并显示最后一项（当前错误）。

问题：但是一旦另一个文件被上传（没有错误），我希望之前的错误消息消失。目前它仍然存在，因为数组在成功上传后不会改变。我想我必须将方法 getRejectedFiles() 收集的主数组重置为零，而不重置整个 dropzone。有办法吗？

这是我的代码的简化版本：

<dropzone [..] @vdropzone-error="collectErrors()"></dropzone>

该方法使用 getRejectedFiles() 收集错误，如下所示：

method:{
    collectErrors:function(){
        this.DropzoneErrorMessages = this.$refs.dropzone.getRejectedFiles()
        // adding some text changes to the error here
    }
}

并且在模板中错误显示如下：

<p v-if="this.DropzoneErrorMessages.length > 0">  //not displayed if no errors
    <template v-for="(error,index) in this.DropzoneErrorMessages">
        <span v-if="index==this.DropzoneErrorMessages.length">{{error.message}}</span>
    </template>
</p>

Answer 1

文件上传成功时会发生 vdropzone-success 事件。您的 dropzone 容器可以侦听该事件，并清除其处理程序中的 DropzoneErrorMessages 数组：

<template>
  <dropzone @vdropzone-success="uploadSuccess" />
</template>

<script>
export default {
  methods: {
    uploadSuccess(file) {
      this.DropzoneErrorMessages = []
    }
  }
}
</script>

VueJS：vue2-dropzone

VueJS: vue2-dropzone

vue.js

vuejs2

vue-dropzone