场景:使用antd-design-vue中的upload时,通过后端保留上次上传过的文件列表,二次上传文件时,若与已上传文件列表中某个文件同名,则上传后覆盖掉已上传文件列表中的同名文件。
upload代码:
<template>
<a-upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:multiple="false"
:file-list="fileList"
@change="handleChange"
>
<a-button> <a-icon type="upload" /> Upload </a-button>
</a-upload>
</template>
去重数组文件列表方法:
const uniqueArray = (fileList) => {
let data = [...fileList]
let first = -1
let last = data[data.length - 1]
first = data.length > 2 ? data.findIndex((item, index) => {
if (index !== data.length - 1) {
return item.name === last.name
}
}) : -1
if (first !== -1) {
data.splice(first, 1, last)
data.pop()
}
return data
}
从后端获取已上传过的文件列表:
async getList() {
const res = await getList()
if(res.success){
this.fileList = res.result
}
},
handleChange(info) {
this.fileList = uniqueArray(info.fileList)},