版本: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数组中与之对应的数据下标,根据数据下标再去删除对应的自定义数据

Logo

前往低代码交流专区

更多推荐