当前位置：首页 > news >正文

Vue3文件上传组件实战：打造高效的Element Plus上传解决方案,可以对文件进行删除，查看，下载功能。

news 来源：原创 2025/4/26 3:31:21

在现代Web开发中，文件上传功能是许多应用的核心需求之一。无论是企业管理系统、内容管理系统还是医疗信息系统，上传附件的功能都至关重要。本文将分享一个基于 Vue3 和 Element Plus 实现的文件上传组件，结合父子组件的协作，展示如何构建一个功能强大、用户体验友好的文件上传解决方案。以下是完整的代码实现和使用指南，适合前端开发者参考和复用。

为什么选择这个解决方案？

灵活性：支持多种文件类型和大小限制，轻松适配不同业务场景。
用户体验：拖拽上传、实时预览、下载和删除功能一应俱全。
可复用性：子组件封装完善，可在多个父组件中快速集成。
国际化支持：通过 vue-i18n 实现多语言提示，适合国际化项目。

子组件：文件上传核心逻辑

子组件 UploadFiles 封装了文件上传的核心功能，包括文件类型和大小校验、上传进度管理、文件列表展示以及预览和下载功能。以下是完整的子组件代码：

<template><div class="w-full upload-file"><el-uploadref="fileUpload"v-if="props.type === 'default'":action="baseURL + other.adaptationUrl(props.uploadFileUrl)":before-upload="handleBeforeUpload":file-list="fileList":headers="headers":limit="limit":on-error="handleUploadError":on-remove="handleRemove":on-exceed="handleExceed":data="formData":auto-upload="autoUpload":on-success="handleUploadSuccess"class="upload-file-uploader"dragmultiple:show-file-list="false"><el-icon size="60" color="#999999"><UploadFilled /></el-icon><div class="el-upload__text">{{ $t('excel.operationNotice') }}<em>{{ $t('excel.clickUpload') }}</em></div><template #tip><div class="el-upload__tip" v-if="props.isShowTip">{{ $t('excel.pleaseUpload') }}<template v-if="props.fileSize">{{ $t('excel.size') }} <b style="color: #f56c6c">{{ props.fileSize }}MB</b></template><template v-if="props.fileType">{{ $t('excel.format') }} <b style="color: #f56c6c">{{ props.fileType.join('/') }}</b></template>{{ $t('excel.file') }}</div></template></el-upload><div class="file-list" v-if="fileList.length > 0"><el-table :data="fileList" style="width: 100%"><el-table-column prop="original" label="文件名" /><el-table-column label="操作" width="250"><template #default="scope"><el-button size="small" type="primary" link @click="handlePreview(scope.row)"><el-icon><View /></el-icon> 查看</el-button><el-button size="small" type="success" link @click="handleDownload(scope.row)"><el-icon><Download /></el-icon> 下载</el-button><el-button size="small" type="danger" link @click="handleRemove(scope.row)"><el-icon><Delete /></el-icon> 删除</el-button></template></el-table-column></el-table></div></div>
</template><script setup lang="ts" name="upload-file">
import { ref, computed, watch } from 'vue';
import { useMessage } from '/@/hooks/message';
import { Session } from '/@/