目录

设计思路

效果展示

​编辑

分析

前后端交互接口

请求

响应

代码实现和详细注释

数据库设计

自定义资源映射

前后端交互

客户端开发

服务器开发

设计思路

效果展示

分析

实现这个功能只要弄清楚以下几点即可：

1. 怎么将头像数据发送给服务器，设定怎样的数据类型？我们可以使用 form 表单将数据进行发送，表单设定格式为 enctype="multipart/form-data"（这也是为什么不直接用 ajax 请求后端，因为 ajax 发送请求的数据格式很难设置成这个数据格式），使用 type="file" 的 input 控件并搭配 type="submit" 的 input 控件来实现用户头像的上传。
2. form 表单提交数据后，怎么接收服务器的响应？使用 FormData 对象来控制 form 表单，通过  FormData 对象的 append 方法即可将 input 控件中的头像数据保存到 FormData 对象中，这时候我们便可以使用 ajax 的方法请求后端，就可以接收服务器响应啦，请求中的数据便是 FormData 对象（相当于对 form 表单的一层封装，只是用其格式类型），这时还需要注意，一定要将 contentType 和 processData 属性设为 false，这样才能避开 ajax 默认发送格式，而使用 form 表单设置的发送数据格式。
3. 服务器如何搭配数据库保存头像数据？数据库不需要完整的将图片数据保存下来，具体如何实现呢，我们可以通过 transferTo 文件操作将图片保存到我们本地磁盘上，然后图片保存的绝对路径以字符串的形式保存到数据库即可（使用 UUID 生成随机字符串保存，否则可能会因为重名而覆盖图片文件）。这样，每次读取图片，通过这个路径即可（注意：最后这句话是一个误区，后面会分析原因）。
4. 服务器保存头像后浏览器即使刷新，头像也没有发生变化？因为浏览器禁止 js 访问本地磁盘，而我们在数据库中保存的是头像的绝对路径，那么肯定是读取不到的。怎么办呢？我们可以设置两个路径，一个是绝对路径（供服务器保存头像），一个是相对路径（供浏览器访问头像），因此数据库保存头像的相对路径即可。
5. 明明按照以上步骤在浏览器上传了图片并保存到了本地磁盘，但是页面图片还是没有更新，需要重启服务器后才会更新图片？这是因为浏览器在界面上传图片，而 Spring Boot 程序是感知不到的，因此需要我们去设定自定义资源映射（具体的，往后看~）。

前后端交互接口

请求

POST /user/subphoto
Content-Type: multipart/form-data
processData: falsedata: new FormData(document.querySelector("#forminfo")) //form 表单对象

响应

HTTP/1.1 200 OK
Content-Type: application/json{"code": 200,"msg": "","data": photoPathRelative //图片相对路径
}

代码实现和详细注释

数据库设计

用户表设计如下：

create table userinfo(id int primary key auto_increment,username varchar(100) unique,password varchar(65) not null,photo varchar(500) default "img/default.jpg",createtime timestamp default current_timestamp,updatetime timestamp default current_timestamp,`state` int default 0,nickname varchar(50) not null,realname varchar(50) default "",idcard varchar(50) default "",gitee varchar(200) default ""
) default charset 'utf8mb4';

自定义资源映射

创建一个类，名为 StaticResourcesConfig，实现 WebMvcConfigurer 接口下的 addResourceHandlers 方法，此方法就是用来注册路由的。

代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration //一定不要忘了这个注解
public class StaticResourcesConfig implements WebMvcConfigurer {/*** 自定义资源映射* 由于在浏览器界面上传图片，而 Spring boot 程序是感知不到的，因此需要自定义资源映射* @param registry*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/upload/**").addResourceLocations("file:upload/");}
}

addResourceHandler("/upload/**")：表示访问的时候路径上要加上upload，不然访问不到。

addResourceLocations("file:upload/")：你图片上传的路径，我的图片上传就在upload文件中。

前后端交互

客户端开发

        //隐藏修改头像和提交控件jQuery("#choose-photo").hide();jQuery("#sub-photo").hide();//修改头像function updatePhoto() {//点击头像，就会弹出文件选择框jQuery("#choose-photo").click();//当 #choose-photo 内容改变时触发jQuery("#choose-photo").change(function () {// //点击 submit 提交表单var fd = new FormData(document.querySelector("#forminfo"));fd.append("myphoto", jQuery("#choose-photo").val());jQuery.ajax({type: "POST",url: "/user/subphoto",data: fd,// 想让文件传输格式为 form 表单设置的格式，那么就必须设置以下两个属性contentType: false,processData: false,success: function (result) {if (result != null && result.code == 200) {//刷新网页alert("头像修改成功!");location.href = location.href;} else {alert("头像上传失败，请稍后重试！");}}});});}

服务器开发

    /*** 修改用户头像* @param request* @param photo* @return*/@RequestMapping("/subphoto")public AjaxResult updatePhoto(HttpServletRequest request,@RequestPart("myphoto") MultipartFile photo) {//非空校验if(photo == null) {return AjaxResult.fail(403, "图片错误!");}//要上传的文件名String originalFileName = photo.getOriginalFilename();//获取用户信息(1.删除旧头像需要原来的旧头像的路径 2.修改图片需要用户 id)UserInfo userInfo = UserSessionUtils.getUser(request);if(userInfo == null || !StringUtils.hasLength(userInfo.getUsername()) ||!StringUtils.hasLength(userInfo.getPassword())) {return AjaxResult.fail(403, "参数错误!");}if(!userInfo.getPhoto().equals("img/default.jpg")) {//不是修改默认头像的话就将旧头像删除即可File file = new File(AppVariable.IMG_PATH_ABSOLUTE+ userInfo.getPhoto().split("/")[2]);file.delete();}//获取文件后缀String suffix = originalFileName.substring(originalFileName.lastIndexOf("."));//生成图片名称，使用 UUID 避免相同图片名冲突，加上图片后缀String photoName = UUID.randomUUID().toString() + suffix;//图片保存路径(绝对路径/相对路径)//这里为什么还要用相对路径，只用绝对路径不行么?//因为禁止浏览器访问本地磁盘绝对路径路径，因此最简单的办法就是配置一个绝对路径用来保存文件，一个相对路径提供给浏览器访问String photoPathAbsolute = AppVariable.IMG_PATH_ABSOLUTE + photoName; //绝对路径String photoPathRelative = AppVariable.IMG_PATH_RELATIVE + photoName; //相对路径//生成文件(绝对路径)File saveFile = new File(photoPathAbsolute);try {//将上传文件绝对路径保存到服务器文件系统photo.transferTo(saveFile);//保存图片相对路径到数据库中userService.updatePhotoById(userInfo.getId(), photoPathRelative);//修改评论userInfo.setPhoto(photoPathRelative);updateInfoUtils.updateSessionAndComment(request, userInfo);} catch (IOException e) {e.printStackTrace();}//将图片相对路径返回给前端return AjaxResult.success(photoPathRelative);}