Ant Design Vue上传文件自定义formData格式传参

index.vue

<template>
    <a-upload
      v-model:file-list="fileList"
      name="file"
      :multiple="false"
      :show-upload-list="false"
      :headers="headers"
      @change="handleChange"
      :customRequest="customRequest"
      @update:visible="updateVisible"
    >
      <a-button type="primary">
        <upload-outlined></upload-outlined>
        上传文件
      </a-button>
    </a-upload>
 </template>
 
 <script lang="ts" setup>
	 import {employeeFileGet,employeeFileUpload , removeEmployeeFile} from '@/api/staff';
	 // 定义员工code
  	 const code = ref()
	 const fileList = ref([]);
	 //文件改变时触发
	 const handleChange = (info) => {
	    if (info.file.status !== 'uploading') {
	      console.log(info.file, info.fileList);
	    }
	    if (info.file.status === 'done') {
	      message.success(`${info.file.name} file uploaded successfully`);
	    } else if (info.file.status === 'error') {
	      message.error(`${info.file.name} file upload failed.`);
	    }
	  };
	  // 获取token
	  const token=localStorage.getItem('access_token')
	  const headers = reactive({
	    authorization: token
	  })
	  // 上传
	  const customRequest = ({file}) => {
	    employeeFileUpload(code.value,file).then((msg) => {
	      message.success(msg);
	      reload()
	    }).catch((e) => {
	       message.error(e.msg);
	    });
	    return false;
	  };
 </script>

api.js

import request from '../../utils/request';
import type { ApiResult } from '../../api/index';
import type { StaffParamModel,StaffAddAndEdit} from './model';
/**
 * 上传文件
 */
 export async function employeeFileUpload(code,files) {
  const formData = new FormData();
  formData.append('employeeCode', code);
  formData.append('files', files);
  console.log(code,files,'员工code','个人文档');
  const res = await request.post<ApiResult<unknown>>('/api/Employee/EmployeeFileUpload',formData);
  if (res.data.status === 200) {
    return res.data.msg;
  }
  return Promise.reject(new Error(res.data.msg));
}