Vue+element ui+springboot实现用户头像修改

文章目录

头像上传
后台接收
前台读取并展示

头像上传

前台上传文件可以直接用element ui的上传组件

     <el-uploadclass="avatar-uploader"action="http://localhost:8080/Login/upload"//上传的地址，即是后台保存文件的接口:show-file-list="false"//是否显示已上传文件列表:on-success="handleAvatarSuccess"//成功之后执行的函数:data="{'userId':user.eid,'status':userStatus}"//传入后台的用户状态和用户ID（注意要是对象）:before-upload="beforeAvatarUpload"//上传前执行的函数判断图片格式style="display: inline-block;width: 300px"><img v-if="imageUrl" :src="data:imageUrl" class="avatar">//上传成功后展示的图片<i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);console.log(URL.createObjectURL(file.raw))console.log(this.imageUrl)console.log(res)},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;},

后台接收

     /*** 修改头像*/@PostMapping("/upload")public String singleFileUpload(@RequestParam("file") MultipartFile file,HttpServletRequest request,Long userId,String status) {//@RequestParam("file") MultipartFile file为接收图片参数//Long userId,String status 用户Id和状态try {byte[] bytes = file.getBytes();String imageFileName = file.getOriginalFilename();String fileName = UpPhotoNameUtils.getPhotoName("img",imageFileName);Path path = Paths.get("C:\\框架\\D4\\d4_pc_ui\\src\\assets\\images\\img\\" + fileName);//“C:\\框架\\D4\\d4_pc_ui\\src\\assets\\images\\img\\”为本地目录Files.write(path, bytes);//写入文件String avatar_url=fileName;if (status.equals("学生")){//判断学生状态调用dao层方法，把图片名称写入数据库studentService.updateAvatar(userId,avatar_url);//dao层方法}else {teacherService.updateAvatar(userId,avatar_url);}System.out.println(fileName+"\n");return fileName;//返回文件名字} catch (IOException e) {e.printStackTrace();}return "";}

根据时间生成图片名称，防止图片名称重复

import java.util.Calendar;public class UpPhotoNameUtils {public static String getPhotoName(String name,String imageFileName){String fileName = name;Calendar cal=Calendar.getInstance();//如果年的目录不存在，创建年的目录int year=cal.get(Calendar.YEAR);fileName=fileName + "_" + year;//如果月份不存在，创建月份的目录int month=cal.get(Calendar.MONTH)+1;fileName=fileName+"_";if(month<10){fileName=fileName+"0";}fileName=fileName+month;//生成文件名的日部分int day=cal.get(Calendar.DAY_OF_MONTH);fileName=fileName+"_";if(day<10){fileName=fileName+"0";}fileName=fileName+day;//生成文件名的小时部分int hour=cal.get(Calendar.HOUR_OF_DAY);if(hour<10){fileName=fileName+"0";}fileName=fileName+hour;//生成文件名的分钟部分int minute=cal.get(Calendar.MINUTE);if(minute<10){fileName=fileName+"0";}fileName=fileName+minute;//生成文件名的秒部分int second=cal.get(Calendar.SECOND);if(second<10){fileName=fileName+"0";}fileName=fileName+second;//生成文件名的毫秒部分int millisecond=cal.get(Calendar.MILLISECOND);if(millisecond<10){fileName=fileName+"0";}if(millisecond<100){fileName=fileName+"0";}fileName=fileName+millisecond;//生成文件的扩展名部分,只截取最后单位String endName = imageFileName.substring(imageFileName.lastIndexOf("."));//截取之后的值fileName=fileName+ endName;return fileName;}
}

要是有服务器，可直接存入服务器，后面存入数据库就可以直接是图片在服务器的路径，前台就可以直接使用，更加方便一些
（ps：这个后台接口参考了一篇博文，暂时没找到）

前台读取并展示

由于没有服务器，存进数据库的是图片的名称
所以需要在前台处理一下

 userAvatarUrl:require("../../assets/images/img/"+this.$store.getters.userInfo.avatarUrl),

注意： require非常重要，如果没有它将无法识别路径，userAvatarUrl将只是一个字符串（后面的this.$store.getters.userInfo.avatarUrl是存到vuex里面的用户的头像名称）

小白一个，如有错误请大佬斧正！

Vue+element ui+springboot实现用户头像修改相关推荐

vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...