Antd上传多个文件,其中与已上传的文件列表某个文件同名,覆盖同名文件并上传
上传多个文件,若其中有与已经上传的文件列表中有同名文件,后者覆盖掉同名文件并上传加入到已经上传的文件列表中。
<template> <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :multiple="true" :file-list="fileList"
:before-upload="beforeUpload"
@change="handleChange" >
<a-button> <a-icon type="upload" /> Upload </a-button>
</a-upload>
</template>
<script> export default { data() { return { fileList: [],
beforeFiles: [], }; },
去重对象数组并覆盖同名文件:
uniqueArray(fileList, snames = [], suids = []) { let list = [...fileList] const names = fileList.map(item => item.name) this.beforeFiles.forEach(item => { if (names.includes(item.name)) { snames.push(item.name) suids.push(item.uid) } }) list = list.filter(item => { if (snames.includes(item.name) && !suids.includes(item.uid)) { return false }else { return item
} }) return lastData },
获取已经上传的文件列表:
async getList() { const res = await getList() if(res.success){ this.fileList = res.result } },
beforeUpload(file, fileList) {
this.beforeFiles = fileList
},
handleChange(info) { this.fileList = this.uniqueArray(info.fileList) },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具