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

Vue + Element UI 图片上传与回显实战：手把手教你实现名医管理系统头像功能

news 2026/6/4 15:26:55

前言：为什么图片上传功能如此重要？

在现代Web应用中，图片上传功能几乎是每个后台管理系统的标配。从用户头像到产品图片，从文章配图到证件照片，图片上传与回显功能无处不在。今天，我将通过一个实际的名医管理系统案例，带你彻底掌握Vue + Element UI中图片上传与回显的实现技巧！

一、项目概览：名医管理系统

让我们了解一下这个项目的背景。这是一个医院的名医信息管理系统，主要功能包括：

名医信息的增删改查
按科室、姓名、职称搜索
头像上传与显示
富文本编辑的医生简介

其中最核心也最容易出问题的就是头像上传与回显功能，接下来我们就重点攻克这个难题！

二、图片上传功能实现详解

2.1 模板部分：el-upload组件配置

vue

<el-form-item label="头像上传" prop="headUrl"> <el-upload action="#" class="avatar-uploader" :file-list="fileList" :limit="1" :on-change="handleFileChange" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" :auto-upload="false" :show-file-list="false" > <div class="image-container"> <!-- 回显已上传的图片 --> <img v-if="this.form.headUrl" :src="this.form.headUrl" class="avatar"> <!-- 删除图标 --> <i v-if="this.form.headUrl" class="el-icon-delete delete-icon" @click.stop="handleRemove()"></i> <!-- 上传图标 --> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </div> <div slot="tip" class="el-upload__tip"> 高宽100*100px, 格式:jpg/png, 大小不超过200kb, 统一底色 </div> </el-upload> </el-form-item>

关键配置解析：

action="#"：设置为"#"因为我们不直接提交到action URL
:auto-upload="false"：关闭自动上传，由我们手动控制
:show-file-list="false"：不显示默认的文件列表，我们自定义样式
:limit="1"：限制只能上传一个文件

2.2 样式设计：美观的上传区域

scss

.avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; width: 178px; height: 178px; } .avatar-uploader .el-upload:hover { border-color: #409EFF; // 悬浮时边框变蓝色 } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; border: 1px dashed #d9d9d9; } .avatar { width: 178px; height: 178px; display: block; } .image-container { position: relative; width: 178px; height: 178px; } .delete-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; cursor: pointer; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; padding: 5px; }

三、核心功能实现代码

3.1 文件上传处理

javascript

// 文件选择后的处理 handleFileChange(file) { const fileLists = new FormData(); fileLists.append("file", file.raw); // 获取原始文件对象 uploadFile(fileLists) .then((res) => { // 拼接完整的图片URL this.form.headUrl = process.env.VUE_APP_BASE_API + res.returnData.fileName; // 更新fileList用于显示 this.fileList.push({ name: res.returnData.fileName, url: process.env.VUE_APP_BASE_API + res.returnData.fileName, }); }) .catch((error) => { this.$message.error("上传失败！"); }); }, // 文件上传前的验证 beforeAvatarUpload(file) { const isJPG = file.type === "image/jpeg" || file.type === "image/png"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error("上传的图片只能是 JPG/PNG 格式!"); } if (!isLt2M) { this.$message.error("上传的图片大小不能超过 2MB!"); } return isJPG && isLt2M; }, // 移除文件 handleRemove(file, fileList) { this.fileList = []; // 清空文件列表 this.form.headUrl = ""; // 清空表单中的图片URL }

3.2 列表页图片回显

vue

<el-table-column label="头像" align="center" prop="headUrl"> <template slot-scope="scope"> <img :src="scope.row.headUrl" width="50" height="50" /> </template> </el-table-column>

3.3 编辑时数据回填

javascript

handleUpdate(row) { this.reset(); const id = row.id || this.ids; getDoctor(id).then((response) => { this.form = response.returnData; // 处理性别显示 if (this.form.sex === 0) { this.form.sex = "女"; } else { this.form.sex = "男"; } // 关键：处理图片回显 if (this.form.headUrl != null && this.form.headUrl != "") { this.fileList = [ { url: this.form.headUrl }, // 设置fileList以显示图片 ]; } else { this.fileList = []; }; this.open = true; this.title = "修改名医"; }); }

四、实战技巧与避坑指南

4.1 图片路径处理技巧

javascript

// 错误做法：直接使用相对路径 this.form.headUrl = res.returnData.fileName; // 正确做法：拼接完整的URL this.form.headUrl = process.env.VUE_APP_BASE_API + res.returnData.fileName;

4.2 表单数据重置

javascript

// 重置表单数据，避免数据残留 reset() { this.form = { id: null, depName: null, name: null, sex: null, birthday: null, title: null, briefIntroduction: null, introduction: null, headUrl: null, // 清空图片URL status: null, }; this.fileList = []; // 清空文件列表 this.resetForm("form"); }

4.3 新增和编辑的差异化处理

javascript

/** 新增按钮操作 */ handleAdd() { this.reset(); this.headUrl = ""; this.fileList = []; // 新增时清空文件列表 this.form.status = 1; this.open = true; this.title = "添加名医"; } /** 修改按钮操作 */ handleUpdate(row) { this.reset(); // ... 获取数据并回填 if (this.form.headUrl != null && this.form.headUrl != "") { this.fileList = [{ url: this.form.headUrl }]; // 编辑时设置fileList } // ... }