Vue2-Dropzone:如何使用 removeFile(file)?
Vue2-Dropzone: How to use removeFile(file)?
我使用 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>
在'uploaded'div中,每个上传的图片(缩略图)旁边都有一个link来删除每个文件。但是我不知道如何实现这个功能。 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 is undefined,这现在有意义,因为只有 DOM 对象可以传递所需的文件信息。
所以我决定试试你一开始看到的版本:
<div><a[..] @click="$emit('removeUpload')></a></div>
在拖放区 DOM 对象中有一个侦听器,启动我的方法 "removeThisFile"。
<drop-zone [..] @removeUpload="removeThisFile" [..]></drop-zone>
但这也不起作用,我不知道为什么,因为我在控制台中没有收到任何错误,而且该方法也没有启动,因为控制台中也没有 "File removed!" .
为什么它不起作用,这是正确的方法吗?
您必须传递 removeFile
您想要删除的文件。
因此您可以将点击处理程序设置为 @click="removeThisFile(UploadFile)"
然后 removeThisFile
需要变为:
removeThisFile: function(thisFile){
this.$refs.MyDropzone.removeFile(thisFile)
console.log("File removed!")
}
我不确定你是否只想用你自己的函数删除文件,但你可以在你的 options
属性中设置键 addRemoveLinks
到 true
,如dropzone
的 documentation
在你的情况下你会得到类似的东西:
MydropzoneOptions: {
url: "...",
addRemoveLinks: true
}
并且您的文件将在缩略图上显示 删除文件 link
我使用 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>
在'uploaded'div中,每个上传的图片(缩略图)旁边都有一个link来删除每个文件。但是我不知道如何实现这个功能。 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 is undefined,这现在有意义,因为只有 DOM 对象可以传递所需的文件信息。 所以我决定试试你一开始看到的版本:
<div><a[..] @click="$emit('removeUpload')></a></div>
在拖放区 DOM 对象中有一个侦听器,启动我的方法 "removeThisFile"。
<drop-zone [..] @removeUpload="removeThisFile" [..]></drop-zone>
但这也不起作用,我不知道为什么,因为我在控制台中没有收到任何错误,而且该方法也没有启动,因为控制台中也没有 "File removed!" .
为什么它不起作用,这是正确的方法吗?
您必须传递 removeFile
您想要删除的文件。
因此您可以将点击处理程序设置为 @click="removeThisFile(UploadFile)"
然后 removeThisFile
需要变为:
removeThisFile: function(thisFile){
this.$refs.MyDropzone.removeFile(thisFile)
console.log("File removed!")
}
我不确定你是否只想用你自己的函数删除文件,但你可以在你的 options
属性中设置键 addRemoveLinks
到 true
,如dropzone
在你的情况下你会得到类似的东西:
MydropzoneOptions: {
url: "...",
addRemoveLinks: true
}
并且您的文件将在缩略图上显示 删除文件 link