ant design vue中a-upload组件remove根据下标删除自定义数据
ant design vuea-uploadremove
·
版本:1.7.8
功能:点击文件列表中的删除图标,调用remove,删除自定义存储文件链接数组中的对应数据
思路:根据file参数获取到对应下标,根据对应下标去删除对应数据
上代码:
<a-upload
list-type="picture"
ref="headerUploadRef"
:customRequest="(file) => {customImageRequest(file, 'header')}"
:remove="(file)=>{removeFile(file, 'header')}"
>
<a-button> <a-icon type="upload" /> 上传 </a-button>
</a-upload>
其中使用customRequest属性覆盖掉默认的上传行为,customImageRequest是自定义的上传方法:
customImageRequest(file, str) {
let params = new FormData()
params.append('file', file.file)
upload(params).then(res => {
if (Number(res.code) === 10000) {
if (str === 'header') {
this.headerFileList.push(res.data)
file.onSuccess()
}
}
})
},
upload是项目中文件上传接口,data是上传成功后返回的数据,当上传成功后要调用onSuccess()方法,不然进度条会一直显示不成功,在那里挂着,当上传成功后,把返回的数据添加到自定义的headerFileList数组中,方法后续使用。
在调用remove方法之前,要先确定在upload组件中,filesList列表在哪?为了解决这个问题走了不少弯路,后来想到了ref属性。
根据ref属性一层的寻找终于找到了生成filesList的数据源头,上代码:
removeFile(file) {
let fileList
let _this = this
fileList = this.$refs.headerUploadRef.$children[1].$children[0].items
fileList.forEach((item, index) => {
if (item.uid === file.uid) {
_this.headerFileList.splice(index, 1)
}
})
}
根据file的uid找到filesListst数组中与之对应的数据下标,根据数据下标再去删除对应的自定义数据
更多推荐
已为社区贡献1条内容
所有评论(0)