el-upload文件上传(只能上传一个文件且再次上传替换上一个文件) vue3+vite+ts

组件：

<template>
    <el-upload class="upload-demo" v-model:file-list="fileList" ref="uploadDemo" action="/public-api/api/file" multiple
        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"
        :before-upload="beforeUpload" :on-success="success" :on-change="change">
        <el-button type="primary">上传</el-button>
    </el-upload>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

import type { UploadProps, UploadUserFile, UploadRawFile, UploadFile, UploadFiles } from 'element-plus'

const emit = defineEmits(['fileREquestFn'])

const fileList = ref<UploadUserFile[]>([
    // {
    //     name: 'element-plus-logo.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
])

const uploadDemo = ref()

const fileId = ref(null)


const change = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const success = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    console.log(response, uploadFile, uploadFiles, 'ddddd')
    if (response.status == 200) {
        uploadDemo.value.clearFiles()
        ElMessage.success("上传成功")

        emit("fileREquestFn", '上传成功后需要传到父级的数据...')

        fileId.valid = response.data.id
    }
    fileList.value.push({ name: uploadFile.name, url: 'https://element-plus.org/images/element-plus-logo.svg' })
}

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)

    const url = `/public-api/api/file/${fileId.value}`; // 替换为你要下载的文件的URL
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank'; //当前页
    link.download = uploadFile.name; // 替换为你想要保存的文件名
    link.click();
}

const beforeUpload = (rawFile: UploadRawFile) => {
    console.log(rawFile, '上传前')
    // const isFile = rawFile.type === 'application/vnd.ms-excel'
    // if (!isFile) {
    //     ElMessage("只支持Excel文件上传")
    //     return
    // }
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}
</script>
<style lang="less" scoped>
.upload-demo {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;

    :deep(.el-upload) {
        position: absolute;
        left: 200px;
        top: 0;
        height: 35px;

        .el-button {
            height: 36px;
            border: none;
            border-radius: 0%;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    }

    :deep(.el-upload-list) {
        width: 200px;
        height: 35px;
        position: absolute;
        top: -11px;
        border: 0.5px solid #ccc;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;

        .el-upload-list__item {
            max-width: 100px;
            margin-top: 2px;
        }

        .el-upload-list__item-file-name {
            height: 28px;
        }
    }
}
</style>

父组件使用：

 <FileUpload @fileREquestFn="fileREquestFn" />

const fileREquestFn = async(raw: any) => {
    //...
}