Ant Design Vue + ts实现文件上传

话不多说，直接上代码

<template>
    <a-form @submit.prevent="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" style="margin-top: 35px;">
        <a-form-item label="授权文件">
            <a-upload :before-upload="beforeUpload" :file-list="fileList" :on-remove="handleRemove">
                <a-button> <CloudUploadOutlined /> 点击上传 </a-button>
            </a-upload>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 6, offset: 18 }">
            <a-button type="primary" html-type="submit" style="width: 80px ;">提交</a-button>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';

const emit = defineEmits(['close']);

const fileList = ref<File[]>([]);
let file: File | null = null;

const beforeUpload = (uploadFile: File) => {
    fileList.value = [uploadFile];
    file = uploadFile;
    return false; // 阻止自动上传
};

const handleRemove = () => {
    fileList.value = [];
    file = null;
};

const handleSubmit = async () => {
    if (!file) {
        message.warn('请先上传文件!');
        return;
    }
    const params = {}; // 根据你的实际情况设置参数
    const body = {
        /*
         *参数
         */
    };
    try {
        //	发起接口请求 const response = await XXX
        if (response) {
            emit('close', true);
            message.success('上传成功!');
        }
    } catch (error) {
        message.error('上传失败!');
    }
};
</script>