Springboot + elementUI实现上传用户头像

最近一直在做一个背单词的小项目练手，准备着加入个新功能，想了很多种办法，本来准备利用sm.ms图床，把用户头像上传到图床然后返回链接把链接存到数据库里，后来想了想，感觉用户的头像存在那不太好，于是还是决定把用户头像存储在项目里的一个文件夹好了。

ElementUI提供了upload的组件组件 | Element官方文档对于我这种没啥艺术细胞的人就只能用人家提供的框架拉（不过说实话我觉得element的组件还是都挺好看的捏）我们这里就直接使用这个组件，然后我这里就直接使用自动上传了。

我想实现的功能就是用户头像下面有个按钮，点击会弹出一个窗口，是用来上传用户头像的，所以还需要用到Dialog的组件，下面是我的HTML部分代码

 <el-button plain @click="avatarDialog = true">更换头像</el-button><el-dialog title="更换头像" :visible.sync="avatarDialog" width="80%"><el-upload class="avatar-uploader" action="/api/up/avatar" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><span slot="footer" class="dialog-footer"><el-button @click="avatarDialog = false">取 消</el-button><el-button type="primary" @click="avatarDialog = false">确 定</el-button></span></el-dialog>

然后的话，我用的是Vue

 data: {imageUrl: '',avatarDialog: false,},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);this.$message.success("上传成功！刷新页面查看！")},beforeAvatarUpload(file) {// 这里我也准备只接受jpg的格式储存所以我就直接用了官方提供的代码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;}}

前端不必多说叭，都是套的框架，然后后端使用的Springboot

这里用到的是commons -fileupload 和commons-io所以要先导入这两个依赖

 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

用户头像图片的存储地址，为了不4所以我在application.yml添加了一个配置

 avatar-save-path: "/images/resource/UserAvatar/"

然后这里是CommonController

 @Value("${avatar-save-path}")private String avatarPath;@AutowiredUserServiceImpl userService;@PostMapping("/up/avatar")public String upImg(MultipartFile file, HttpServletRequest req) throws IOException {log.info("Updating the File:" + file.toString());// 获取文件的原始名称String originalFilename = file.getOriginalFilename();// 获取原始文件的后缀，只不过我这里只接受jpgString suffix = originalFilename.substring(originalFilename.lastIndexOf("."));// 产生随机的UUID+文件后缀形成新的文件名（为了让图片没那么容易被覆盖）String newName = UUID.randomUUID().toString() + suffix;String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();// 这里获取了session，因为当时项目访问这个接口不存在没登录的情况User user = (User) req.getSession().getAttribute("user");// 这里是生成了文件存储的路径String basePath = path + avatarPath;// 判断文件夹是否存在，不存在的话新建一个File dir = new File(basePath);if (!dir.exists()) {dir.mkdirs();}// 因为一开始的文件存储在临时目录里，所以这里要转存到新的地方file.transferTo(new File(basePath + newName));// 将用户的头像地址改为新的地址user.setAvatarUrl(avatarPath + newName);// 这里是修改了数据库里用户的头像地址userService.changeUser(user);// 更新Sessionreq.getSession().setAttribute("user",user);log.info("File: " + newName + " is saved in " + basePath);log.info(user.getUsername() + " set avatar to " + basePath);// 返回新的头像地址return avatarPath + newName;}

这是俺第一次写博客，可能会有些不对的地方或者可以优化的地方，希望大佬可以给我提提建议啥的，还有希望这篇文章可以帮助到跟我一样是萌新的小伙伴。

Springboot + elementUI实现上传用户头像相关推荐

SpringBoot 使用MultipartFile上传组件实现本地上传用户头像
GIF动图展示 SpringBoot 使用MultipartFile上传组件实现本地上传用户头像GIF效果图本章目录 GIF动图展示主要实现思路 1.使用MultipartFile需要引入的依赖 ...
【探花交友】保存用户信息、上传用户头像、用户信息管理
文章目录 1.3.保存用户信息 1.4.上传用户头像 2.用户信息管理 2.1.查询用户资料 2.2.更新用户资料 1.3.保存用户信息 1.3.1.接口文档 YAPI接口地址:http://192. ...
php文件用户头像上传代码,网页web上传用户头像代码实现（美图秀秀开放）
网页web上传用户头像代码实现(美图秀秀开放) 在制作论坛或者一些门户社交网站的时候,经常要获取用户的头像.之前我们一般都是自己制作flash插件头像上传.或者用js来自己开发一个头像上传功能.比如有 ...
SSM上传用户头像。解决HTTP 400,保存到本地以及数据库保存路径，在页面显示的问题
第一次用SSM上传用户图片,遇到很多问题,这里逐一记录: 1.保存到本地某个文件夹 2.在页面显示图片 3.报错HTTP 400 bad request 用maven搭建的项目,结构如图: 主要是实体 ...
用户上传用户头像至服务器
web框架:spring+hibernate+jQuery HTML代码:  <div class="col-sm-3 userpic&quo ...
SpringBoot实现文件上传（头像）
注意: -上传文件 --请求必须是POST请求 --表单enctype="multipart/form-data" --SpringMVC通过MultipartFile处理上 ...
PHP上传用户头像及头像的缩略图
upImg.html <!DOCTYPE html> <html> <head><meta charset="utf-8">< ...
美图秀秀插件上传用户头像
1.首先要设置crossdomain.xml 下载地址:https://download.csdn.net/download/ly_linyuan/10355995 这个要特别注意,要把这个文件下载下 ...
微信小程序--更换用户头像/上传用户头像/更新用户头像
changeAvatar:function (){var that=this;wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compr ...

Springboot + elementUI实现上传用户头像

Springboot + elementUI实现上传用户头像相关推荐

最新文章

热门文章