Spring Boot 项目如何实现上传头像功能？

痛定思痛。 2023-09-25 23:04 49阅读 0赞

**目录**

设计思路

效果展示

编辑

分析

前后端交互接口

请求

响应

代码实现和详细注释

数据库设计

自定义资源映射

前后端交互

客户端开发

服务器开发

--------------------

# 设计思路 #

--------------------

## 效果展示 ##

![aa9c239feebc45578b08a6be2a63a7d1.png][]

### ![f087bfbf30e44f8ba693ab2d0beca0a8.png][] ###

## 分析 ##

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

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: false
    
    data: 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
         */
        @Override
        public 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);
        }

![fc67d4ad41cc4614a53647fc07040bad.gif][]

[aa9c239feebc45578b08a6be2a63a7d1.png]: https://img-blog.csdnimg.cn/aa9c239feebc45578b08a6be2a63a7d1.png
[f087bfbf30e44f8ba693ab2d0beca0a8.png]: https://img-blog.csdnimg.cn/f087bfbf30e44f8ba693ab2d0beca0a8.png
[fc67d4ad41cc4614a53647fc07040bad.gif]: https://img-blog.csdnimg.cn/fc67d4ad41cc4614a53647fc07040bad.gif