首页 > 其他分享 >Antd上传多个文件,其中与已上传的文件列表某个文件同名,覆盖同名文件并上传

Antd上传多个文件,其中与已上传的文件列表某个文件同名,覆盖同名文件并上传

时间:2023-03-25 10:37:04浏览次数:54  
标签:文件 return name 同名 fileList item 上传

上传多个文件,若其中有与已经上传的文件列表中有同名文件,后者覆盖掉同名文件并上传加入到已经上传的文件列表中。

<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)
},

 



标签:文件,return,name,同名,fileList,item,上传
From: https://blog.51cto.com/u_15175907/6148902

相关文章