SpringBoot 实战项目继续冲之(上传头像更改个人信息案例)

个人简介： js同学你好

---

💖年龄： 20   大二在读
📃专业:   计算机科学技术
💪爱好:   单曲循环 写写文章
🎯相关:   课设级别商城项目续篇(头像上传部分)

最终效果：

选择文件上传之后头像会自动展示在前端界面并且在下一次登录的时候查看各个人信息也可以将头像显示出来。

如果更换头像便再次点击选择文件替换头像即可

项目解析：

其实上传头像的过程就是一个update操作，只不过：先将用户上传的文件保存到服务器端的某个位置，然后将保存文件的路径记录在数据库中。当后续需要使用该文件时(也就是查看个人信息时)，从数据库中读出文件的路径，即可实现在线访问该文件。
所以我们在数据库中建立用户表时应该增加一个avatar(头像)字段。

===========================================================

异常处理：

为了防止用户错误操作而导致上传的文件不是图片类型，或者用户上传了一张高清画质的图片导致上传文件过大再或者用户点击了上传文件但是没有选择任何图片，也可能会发生一些系统错误，诸如文件读写时发生错误等一系列错误，我们都应该将错误排除在外。
我们应该做一个文件上传异常的基类然后让这个类继承RuntimeException然后其它的文件异常类便可以继承这个基类。


然后再BaseController中将相关异常捕获。(可以看我上一篇文章)

Controller层处理文件上传：

因为上传的文件是通过字节流通过前端传到后端的所以我们可以一个final变量来限定文件的大小然后再与上传的文件进行比较。
对于上传的文件类型我们可以初始化一个List集合让List集合中包含着图片类型，然后判断传进的文件类型是否包含在List集合中。
处理完了相关异常之后便可以接收上传的文件了对于前端传递的参数后端都有对应的类型来接收文件可以用

来接收。
有了文件之后我们便考虑如何将文件保存下来。将文件保存下来有两步操作，将文件保存到哪个地方，数据库中应该如何保存文件的地址。
我们知道springBoot映射的目录中有static目录所以我们考虑再static下建立一个update文件夹专门用来存放用户上传的文件，
有了文件夹之后我们得考虑保存文件名了但是好像又有一个问题因为前端传来的图片名一般是五花八门的而且文件名极长不利于我们的保存
所以我们考虑自己通过UUID的方法生成一个文件名然后再将类型拼接上类型后缀问题不久解决了吗。

然后再将我们自己拼接的文件放在update的目录下，但是大家再想一下现在的文件只是一个空文件没有任何内容我们是不是得需要将原文件中的内容放进新的文件中

这时我们只需要将头像路径保存下来即可

前端处理:

大家再来想一下在此之前我们向前端传递的数据都是JSON格式的字符串，这也是前端默认的传递方式，但是这次我们想向后端传递文件所以就不需要将文件内容被浏览器给自动转换了，我们需要保留原来的格式。


这样我们就可以通过前端将文件传递到后端了。
然后我们将图片显示出来并将图片的位置信息保存到cookie中


所以我们需要一个ready方法去加载cookie中的路径

$(document).ready(function () {
   console.log("cookie中的avatar=" + $.cookie("avatar"));
   $("#img-avatar").attr("src", $.cookie("avatar"));
});

添加拦截器:解决图片不显示问题

我们将图片保存到相应的位置之后又发现了一个问题，那就是图片显示不出来。

这说明了什么虽然我们的cookie中的路径信息已经存在了但是从你的服务端找到改图片所以我们考虑加一个拦截器处该问题。

当我们在实现WebMvcConfigurer的类下重写该方法之后神奇的一幕便发生了，上传成功了也实现了修改。

登录显示头像

但是我们的野心并不满足于此我们想的是我们登录的时候便可以将头像显示出来,其实也比较容易实现，我们可以在登录时就将我们的avatar(头像)信息保存在cookie中。
这个{expires:7}的意思是可以保存的天数如果不填那么保存的时间就是打开和关闭浏览器的时间段。

小细节:

SpringBoot对上传的文件有一个默认的文件限制SpringBoot中默认MultipartResolver的最大文件大小值为1M。如果上传的文件的大小超过1M，会抛FileSizeLimitExceededException异常。如果需要调整上传的限制值，直接在启动类中添加getMultipartConfigElement()方法，并且在启动类之前添加@Configuration注解。

存在的问题：

项目中再更新头像时只能将原来的路径修改而不能将原来的图片删掉这样来看会占据内的。其实实现起来也是不难的，大家可以广开思路大胆评论哦。

至此头像上传完结

🎉欢迎关注🔍点赞👍收藏🎇留言📙