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

**Vue3 + Vite + TS 实现的 El-Upload 文件上传组件**

### 组件介绍本文将介绍如何使用 Vue3、Vite 和 TypeScript 构建一个 El-Upload 文件上传组件。该组件支持单个文件上传，并且可以替换上一次上传的文件。

### 组件代码首先，我们需要创建一个名为 `ElUpload` 的 Vue 组件：

typescript// src/components/ElUpload.vue<template>
 <div class="el-upload">
 <input type="file" @change="handleFileChange" ref="fileInput" />
 <span v-if="!file">点击上传文件</span>
 <span v-else>已上传 {{ file.name }}</span>
 </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
 name: 'ElUpload',
 setup() {
 const file = ref(null);
 const handleFileChange = (event: Event) => {
 const target = event.target as HTMLInputElement;
 if (!target.files || !target.files.length) return;
 const selectedFile = target.files[0];
 file.value = selectedFile;
 };
 return { file, handleFileChange };
 },
});
</script>

<style scoped>
.el-upload {
 display: flex;
 align-items: center;
 padding:10px;
 border:1px solid #ddd;
 border-radius:4px;
 cursor: pointer;
}
</style>

typescript// src/App.vue<template>
 <div class="app">
 <ElUpload @change="handleFileChange" />
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ElUpload from './components/ElUpload.vue';

export default defineComponent({
 name: 'App',
 components: { ElUpload },
 setup() {
 const handleFileChange = (event: Event) => {
 console.log('文件上传成功:', event);
 };
 return { handleFileChange };
 },
});
</script>

<style scoped>
.app {
 width:100%;
 height:100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
</style>