vue3中使用el-upload 的before-upload 校验文件名是否重复

1.template

                //     :auto-upload="false" 是否自动上传， 默认true
 <el-upload
                          v-model:file-list="fileList[editableTabsValue]" 
                          drag
                          :action="uploadFileUrl" 
                          :headers="headers" 
                          multiple
                            :before-upload="handleBeforUpload"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          :limit="3"
                          :on-exceed="handleExceed"
                          :on-success="handleSuccess"
                          style="width: 100%"
                        >
                          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                          <div class="el-upload__text">
                            拖拽文件至此处 或 <em>点击上传文件</em>
                          </div>
                          <template #tip>
                            <div class="el-upload__tip">
                              文件不限格式，单个文件大小需小于 50M
                            </div>
                          </template>
                        </el-upload>

2.methods

// 上传
    const headers = ref({Authorization: "Bearer " + getToken()})
    const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload")
    const fileList = ref<UploadUserFile[]>([])
    //移除文件时的钩子函数
    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log("onRemove=", file, uploadFiles)
    }

    //点击文件列表中已上传的文件时的钩子
    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
      console.log("onRemove=",uploadFile)
    }
    
    //当超出限制时，执行的钩子函数
    const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
        ElMessage.warning(
        `文件个数不得超过3个！`
      )
    }

     //上传文件之前的钩子
    const handleBeforUpload: UploadProps['beforeUpload'] = (response, uploadFile, uploadFiles) => {
        console.log("beforeUpload response=", response)
        if(response.size > fileMaxSize){
            ElMessage.warning(
                `【${response.name}】文件大小超过限制！`
            )
            return false;
        }

        if(fileList.value[editableTabsValue.value]){
            let exist = fileList.value[editableTabsValue.value].find((item, index, arr)=>{
                return item.name === response.name
            })
            if(exist){
                ElMessage.warning(
                    `【${response.name}】文件名已存在,不能重复上传！`
                )
                return false;
            }
        }
        return true;
    }

    //文件上传成功时的钩子
    const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
        console.log("onSuccess=", response, uploadFile, uploadFiles)
    }


    //删除文件之前的钩子  注意beforeUpload 和beforeRemove不能同时使用， 若同时使用， 在执行完 beforeUpload时校验不能上传， 会立即执行 删除钩子
    // const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    //   return ElMessageBox.confirm(
    //     `取消文件 ${uploadFile.name} 上传?`
    //   ).then(
    //     () => true,
    //     () => false
    //   )
    // }