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

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

在现代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
  }
  // ...
}