首页 > 其他分享 >Antd上传文件与已上传的文件列表文件同名,覆盖已有的同名文件

Antd上传文件与已上传的文件列表文件同名,覆盖已有的同名文件

时间:2023-03-25 10:36:48浏览次数:47  
标签:文件 data 同名 fileList 列表 上传 first

场景:使用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)},

 

 



标签:文件,data,同名,fileList,列表,上传,first
From: https://blog.51cto.com/u_15175907/6148903

相关文章