解决antd upload自定义上传customRequest，上传时一直loading加载的问题

问题：antd自定义上传customRequest时，无法正常显示上传成功状态，一直在上传的loading状态中。

查看customRequest参数

解决方法：调用onSuccess事件，解决loading一直加载的问题。

<template>
    <a-upload
        ref="filesUpload"
        :class="['isbm-files-upload', { 'hidden-upload-button': !showUploadButton }]"
        v-model:file-list="innerFileList"
        :action="action"
        :data="data"
        :accept="accept"
        :disabled="disabled"
        :multiple="multiple"
        :maxCount="maxCount"
        :show-upload-list="{ showPreviewIcon: true, showDownloadIcon: true, showRemoveIcon: true }"
        :beforeUpload="beforeUpload"
        :customRequest="customRequest"
        @preview="handlePreview"
        @change="handleChange"
        @download="handleDownload"
        @remove="handleRemove"
    >
        <div>
            <a-button :type="buttonType" :disabled="disabled">
                <template #icon><upload-outlined></upload-outlined></template>
                上传附件
            </a-button>
        </div>

        <template #downloadIcon>下载</template>
        <template #removeIcon>删除</template>
    </a-upload>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import fileRequest from '@/config/fileRequest.js';
import { getFileType, downloadNormal } from '@/utils';

const props = defineProps({
    action: {
        // 自定义上传的地址
        type: String,
        default: '/system/file/upload' // 默认上传地址
    },
    data: {
        type: Object,
        default() {
            return {
                bizType: ''
            };
        }
    },
    fileList: {
        type: Array,
        default() {
            return [];
        }
    },
    disabled: {
        // 是否禁用
        type: Boolean,
        default: false
    },
    showUploadButton: {
        // 是否显示上传按钮
        type: Boolean,
        default: true
    },
    multiple: {
        // 是否支持多选文件
        type: Boolean,
        default: false
    },
    maxCount: {
        // 限制上传数量
        type: Number,
        default: undefined
    },
    maxSize: {
        type: Number,
        default: 200 //单位：M
    },
    accept: {
        // 接受上传的文件类型
        type: String,
        default:
            '.bmp, .jpg, .jpeg, .png, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .rar, .zip, .3gpp, .mp4, .mpeg, .mov, .m4v, .mng, .avi, .mid, .midi, .mp3, .m4a, .dwg, .pdf, .mpp, .wav, .wps'
    },
    uploadNotice: {
        // 下标提示
        type: String,
        default:
            '支持扩展名：.bmp, .jpg, .jpeg, .png, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .rar, .zip, .3gpp, .mp4, .mpeg, .mov, .m4v, .mng, .avi, .mid, .midi, .mp3, .m4a, .dwg, .pdf, .mpp, .wav, .wps'
    },
    customActionConfig: {
        // 使用自定义上传的相关配置，目前主要是请求参数，后期可以拓展，在watch中初始化参数
        type: Object,
        // default(rawProps) {
        //     return { message: 'hello' }
        // }
        default() {
            return {};
        }
    },
    visible: {
        type: Boolean,
        default: false
    },
    buttonType: {
        type: String,
        default: 'primary'
    }
});
const emit = defineEmits(['update:fileList', 'onExceed', 'remove']);

const { proxy } = getCurrentInstance();

const filesUpload = ref(null);
const innerFileList = computed({
    get() {
        return props.fileList;
    },
    set(value) {
        emit('update:fileList', value);
    }
});

// 上传文件之前的钩子
const beforeUpload = (file, fileList) => {
    // fileList 只包含了当次上传的文件列表，不包含已上传的文件列表
    if (props.maxCount && innerFileList.value.length + fileList.length > props.maxCount) {
        console.log(innerFileList.value.length);
        proxy.$message.error(`上传文件数量超出最大限制${props.maxCount}个`);
        emit('onExceed', file);
        return false;
    }

    if (file.size / 1024 / 1024 > props.maxSize) {
        proxy.$message.error(`上传文件超出最大限制${props.maxSize}M`);
        emit('onExceed', file);
        return false;
    }

    const suffix = getFileType(file.name); // 获取文件后缀名
    if (props.accept.indexOf(suffix) === -1 && props.accept.indexOf('image') === -1) {
        proxy.$message.error('文件格式错误');
        return false;
    }
    // return false 时status为undefined

    return true;
};
// 自定义上传
const customRequest = (event) => {
    const formData = new FormData();
    if (event.data) {
        Object.keys(event.data).forEach((key) => {
            formData.append(key, event.data[key]);
        });
    }
    formData.append(event.filename, event.file);
    fileRequest
        .post(event.action, formData, { withCredentials: event.withCredentials })
        .then((res) => {
            event.onSuccess(res, event.file); //上传成功监听事件
        })
        .catch((err) => {
            event.onError(err, err, event.file); //上传失败监听事件,onError 第二个参数要是字符串才能显示错误原因
            proxy.$message.error(event.file.name + err);
        });
};
const handleChange = (event) => {
    const fileList = event.fileList;
    // const file = event.file;
    // const status = file.status;  // 状态有：uploading done error removed; 另外beforeUpload钩子函数中return false 时，status为undefined
    // if (status === 'uploading') {
    //     loading.value = true;
    // } else if (status === 'done') {
    //     loading.value = false;
    // } else if (status === 'error') {
    //     loading.value = false;
    // } else if (status === 'removed') {
    //     console.log('removed');
    // } else if (status === undefined) {
    //     console.log('reject');
    // }
    innerFileList.value = fileList.filter((file) => ['uploading', 'done'].includes(file.status));
};
const handleDownload = (file) => {
    downloadNormal(file.response.pk, file.response.name);
};
const handlePreview = (file) => {
    window.open(file.response.url);
};
const handleRemove = (file) => {
    emit('remove', file);
    return true;
};
</script>

<style lang="less" scoped>
.isbm-files-upload {
    &.hidden-upload-button {
        :deep(.ant-upload.ant-upload-select) {
            display: none;
        }
    }

    .file-question-circle {
        margin-left: 6px;
        color: var(--isbm-disabled-color);
    }
    :deep(span.ant-upload-list-item-name) {
        color: #1890ff;
        background-color: transparent;
        cursor: pointer;
    }
}
</style>