vue 手动上传修改文件名

<template>
  <div class="uploadCom">
    <a-upload :file-list="fileList" 
    name="file"
    :max-count="props.maxCount"
    :before-upload="(...defaultArgs: any) => beforeUploadFile(defaultArgs)"
    :accept="accept"
    list-type="text"
    :custom-request="downloadFilesCustomRequest"
    @remove="handleRemove"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      上传文件
    </a-button>
  </a-upload>
  <div class="tipUpload"
    style="
      font-size: 11px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #b5b5b5;
      line-height: 20px;
      margin-top: 8px;
    "
  >
    <div>文件&lt;50M</div>
    <div>支持上传pdf;图片格式的文件</div>
  </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref,  } from 'vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { message, Upload } from 'ant-design-vue';
  import {uploadFile} from "@/api/common"
  const emit = defineEmits(['uploadChange'])
  const fileList:any = ref([])
  const props = defineProps({
    file:{
        type:Array,
        default:()=>[]
    },
    maxCount:{
      type:Number,
        default:100
    },
    customFileName:{
      type:String,
      default:''
    }
  })
  const accept = ref(
    'image/jpeg,image/png,application/pdf'
  );

  const getFileSuffix = (name: string) => {
  return name.slice(name.lastIndexOf('.')).toLowerCase();
};

  const downloadFilesCustomRequest = async (data) => { 
    const fileSuffix = getFileSuffix(data.file.name)
    const formData = new FormData()  
    if(props.customFileName){
      //手动上传 修改文件名
      const copyFile = new File([data.file], `${props.customFileName}${fileSuffix}`)
      formData.append('file', copyFile)
    } else {
      formData.append('file', data.file)  
    }

    uploadFile(formData).then((res:any) =>{
      if(res?.id){
       const file:any =  fileFormatter(res)
       fileList.value.push(file)
       emit('uploadChange',{
          type:'add',
          data:{code:200,data:res}
        })
      }else{
        message.error(`${data.file?.name} 上传失败`);
      }
    })
  }

  const beforeUploadFile = (defaultArgs: any) => {
    const isLt50M = defaultArgs[0].size / 1024 / 1024 < 50;
    let isJpgOrPng = true;
    isJpgOrPng =
      defaultArgs[0].type === 'image/jpeg' ||
      defaultArgs[0].type === 'image/png' ||
      defaultArgs[0].type === 'application/pdf' 
    if (!isJpgOrPng) {
      message.error('请上传正确的文档格式---.jpg,.png,.jpeg,.JPG,.PNG,.JPEG.pdf...');
      setTimeout(() => {
        fileList.value.splice(fileList.value.length -1,1)
      }, 50);
      return false;
    }
    if (!isLt50M) {
      message.error('文件大小超出限制，请修改后重新上传');
      setTimeout(() => {
        fileList.value.splice(fileList.value.length -1,1)
      }, 50);
      return false;
    }
    return isLt50M || isJpgOrPng || Upload.LIST_IGNORE;
  };

  const handleRemove = (data) =>{
    fileList.value = fileList.value.filter(i => i.uid !== data.uid)
    emit('uploadChange',{
          type:'remove',
          data
      })
      message.success(`${data.name} 删除成功`);
  }

 const fileFormatter = (data) => {  
        const file = {  
                uid: data.id,    // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突  
                name: data.fileName + data?.fileSuffix,   // 文件名  
                status: 'done', // 状态有：uploading done error removed  
                response: {code: 200,data}, // 服务端响应内容  
          }  
         return file  
        }

</script>

<style lang="less" scoped>
 .uploadCom{
    display: flex;
    flex-direction: column;
    width: 100%;
 }
</style>