Antd上传文件与已上传的文件列表文件同名,覆盖已有的同名文件
场景:使用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>
<script>
export default {
data() {
return {
fileList: [],
};
},
去重数组文件列表方法:
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)},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具