ant-desgin-vue 上传文件

上传文件到后台

调取的是后台的接口

该写法是 jsx 的写法

下面是 vue 文件

import { defineComponent } from 'vue'
import { UploadOutlined } from '@ant-design/icons-vue';
import { importPeople } from '@/api'

export default defineComponent({
	name: 'Upload',
	setup() {
	    // 上传文件 请求
	    const employeeFileUpload = async (file: any) => {
	      const formData = new FormData();
	      // 注意 这个file 是一个对象 我们只要里面的 file 不需要其他的参数
	      formData.append('file', file.file);
	      const res: any = await importPeople(formData)
	      console.log(res, 'res  --->');
	      if (res.status === 200) {
	        return res.data;
	      }
	      return Promise.reject(new Error(res.msg));
	    }
	    
	    // 通过覆盖默认的上传行为，可以自定义自己的上传实现
	    const customRequest = (file: any) => {
	      // 接口请求
	      employeeFileUpload(file).then((request: any) => {
	        message.success(request.msg);
	      }).catch((e) => {
	        message.error(e.msg);
	      });
	    };
	
		return() => (
            <a-upload
                multiple={false}
                name={"file"}
                show-upload-list={false}
                headers={headers}
                customRequest={(file: any) => customRequest(file)}
              >
                <a-button type="primary" ghost style={{marginTop:'auto'}} onClick={()=>downloadTable()}>
                  <UploadOutlined />
                  报表导入</a-button>
              </a-upload>
		)
	}
})

api 文件

后端接口 是 formData 所以 Content-Type: multipart/form-data

	import { getToken } from '@/utils/cookies'
	import axios from 'axios'
	
	// 导入报表
	export const importPeople = (data?: any) => {
	  const token = getToken('token');   
	  const headers:any = { 
	    Authorization: token,
	    "Content-Type": "multipart/form-data"
	  };
	  return axios({
	    url: `${import.meta.env.VITE_APP_BASE_API}/importPeople`,
	    method: "post",
	    data: data,
	    headers: headers
	  });
	}