ant design vue中a-upload组件remove根据下标删除自定义数据

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