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}`; // 替换为你要下载的文件的URLconst 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) => {//...
}