vue.js - Vue2-Dropzone:如何使用removeFile(文件)？

Question

我使用 vue2Dropzone 创建了一个自定义 Dropzone:

<drop-zone :options="MydropzoneOptions" :include-styling="false" @vdropzone-success="UploadSuccess" @removeUpload="removeFile" id="MyDropzoneID" ref="MyDropzone" :useCustomSlot=true>
        <div class="dropzone-custom-content">
            <h3>Upload Here</h3>
        </div>
</drop-zone>

上传的文件将显示在一个单独的 div 中，其 id="uploaded":

    <div id="uploaded" class="dropzone-previews">
        <h3>Uploaded Files:</h3>
        <template v-for="(UploadFile,index) in MyUploads">
            <img :src="UploadFile.Dateiname"><a title="Delete this file" @click="$emit('removeUpload')">Delete</a>
        </template>
    </div>

在“已上传”div 中，每个上传的图像(缩略图)旁边都有一个用于删除每个文件的链接。但我不知道如何实现这个功能。 documentation says有一个名为removeFile(file)的方法: .removeFile(file) -->从拖放区中删除文件。

我创建了一个名为removeThisFile的方法，启动了@click="removeThisFile":

    removeThisFile: function(){
        this.$refs.MyDropzone.removeFile()
        console.log("File removed!")
    }

但结果是控制台显示“this.$refs.Mydropzone 未定义，现在这是有道理的，因为只有 DOM 对象可以传递所需的文件信息。 所以我决定尝试一下您在开头看到的版本:

<div><a[..] @click="$emit('removeUpload')></a></div>

在拖放区 DOM 对象中，有一个监听器，启动我的方法“removeThisFile”。

   <drop-zone [..] @removeUpload="removeThisFile" [..]></drop-zone>

但这也不起作用，我不知道为什么，因为我在控制台中没有收到错误，而且该方法也没有启动，因为也没有“文件已删除!”在控制台中。

为什么它不起作用，这是正确的方法吗？

Answer 1

您必须传递 removeFile 您要删除的文件。

因此，您可以将点击处理程序设置为 @click="removeThisFile(UploadFile)" ，然后 removeThisFile 需要变为:

    removeThisFile: function(thisFile){
        this.$refs.MyDropzone.removeFile(thisFile)
        console.log("File removed!")
    }