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为“ =“已上传”：

    <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) -->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>

在拖放区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 {3}}的dropzone

在您的情况下，您将得到类似的东西：

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

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

Vue2-Dropzone：如何使用removeFile（file）？

2 个答案: