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

发布时间 2023-03-22 21:17:24作者: ༺Tu༒aimes༻

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

 

change方法:

handleChange(info) {
      this.fileList = uniqueArray(info.fileList)},