Fork me on GitHub

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)
},
复制代码

 

posted @   ༺Tu༒aimes༻  阅读(135)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示