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中，每个上传的图像(缩略图(旁边都有一个删除每个文件的链接。但是我不知道如何实现这个功能。文档中说有一种方法叫做removeFile(file(：.removeFile(file) -->Removes a file from the dropzone area.

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

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

但结果是控制台显示"this.$refs.Mydropzone未定义，这现在很有意义，因为只有DOM对象可以传递所需的文件信息。所以我决定试试你一开始看到的版本：

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

在drop zone 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!")
}

Answer 2

我不确定你是否只是想用自己的函数删除文件，但你可以在你的options道具中设置密钥addRemoveLinks到true，如dropzone 的文档中所述

在你的情况下，你会有这样的东西：

MydropzoneOptions: {
url: "...",
addRemoveLinks: true
}

您的文件将在缩略图上显示删除文件链接