Spring Boot+JS+Ajax上传用户头像后刷新页面不显示问题咨询

问题根因 #

你的问题核心是登录后用户信息被缓存到了Session、Redis或Spring Security上下文中，你当前的头像更新逻辑仅修改了数据库中的用户头像字段，没有同步更新缓存中存储的登录态用户信息。页面刷新时读取的是缓存里的旧头像地址，只有退出重新登录才会从数据库拉取最新的用户信息，所以才会出现需要重登才能看到新头像的问题。
同时如果你的头像URL是固定路径，也可能存在浏览器静态资源缓存的问题。

可行解决方案 #

后端修复（核心必须做） #

修改api/updateprofilepic接口逻辑，在数据库更新成功后，同步更新当前登录用户的缓存信息：

@PostMapping("/api/updateprofilepic")
public R updateProfilePic(String userid, String img, HttpSession session) {
    // 原有更新数据库用户头像的逻辑
    userMapper.updateAvatar(userid, img);
    
    // 新增：同步更新Session中存储的登录用户信息
    User loginUser = (User) session.getAttribute("loginuser");
    loginUser.setAvatar(img);
    session.setAttribute("loginuser", loginUser);
    
    // 如果你使用Spring Security做权限控制，额外添加如下代码更新上下文
    // UserDetails userDetails = userDetailsService.loadUserById(userid);
    // UsernamePasswordAuthenticationToken auth = new UsernamePasswordAuthenticationToken(userDetails, userDetails.getPassword(), userDetails.getAuthorities());
    // SecurityContextHolder.getContext().setAuthentication(auth);
    
    return R.ok();
}

如果你的登录用户信息是存在Redis中，同理找到Redis中对应用户的key，更新头像字段即可。

解决浏览器缓存问题 #

如果你的头像URL是固定不变的（比如/avatar/用户id.jpg），浏览器会默认缓存旧图片，就算后端数据更新了，浏览器还是会读取本地缓存的旧图，两种解决方式：

1. 上传头像时生成带随机后缀的新URL，比如/avatar/123_1698723423.jpg，保证每次上传后URL都不同
2. 页面渲染头像时给URL加时间戳参数，强制浏览器每次拉取新图：

<img src="${loginUser.avatar}?t=<%=System.currentTimeMillis()%>" alt="用户头像">

前端体验优化 #

上传成功后不需要等页面刷新，直接手动替换页面上所有头像的src属性，用户可以即时看到新头像：
修改userprofilepic函数的成功回调逻辑：

swal({title: "Yippee! Image Uploaded!", text: "User Image Uploaded Successfully", type: "success"},
    function(){
        // 替换页面所有头像的地址
        $(".user-avatar").attr("src", img);
        // 可根据需求选择是否刷新页面
        location.reload();
})

完成以上修改后，上传头像后刷新页面即可直接看到最新的头像，不需要重新登录。

内容的提问来源于stack exchange，提问作者Rakhi