springboot项目上传头像回显

springboot项目使用ajax上传头像回显

先上效果图：

开始上传

点击提交

环境：

1. springboot2.2.5.RELEASE
2. jdk：1.8
3. thymeleaf：3.0.4.RELEASE

springboot项目是jar包运行的,采用的嵌入式的tomcat.所以图片的存储不再像以前war包方式。
解决方案：
1、MvcConfig配置类中注册一个资源映射类

//所有的WebMvcConfigurer组件会一起起作用
    @Bean//将组件注入容器中
    public WebMvcConfigurer webMvcConfigurer(){
        WebMvcConfigurer webMvcConfigurer = new WebMvcConfigurer(){             
           //资源映射
            @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry){
                registry.addResourceHandler("/images/**").addResourceLocations("file:E:/Springboot/app/src/main/resources/static/asserts/images/avatar/");
            }
        return webMvcConfigurer;
    }

第二步：在页面中图片的src，我这里采用的是用户的id作为头像的图片名字

th:src="@{/images/{userId}(userId=${session.user.getId()}+'.jpg')}"

你也可以采取

th:src="@{/images/图片名}

最后是ajax成功后的函数：

$.ajax({
                type:"post",
                url:"/app/userUploadAvatar",
                datatype: "json",
                async:false,
                data:{
                    "user_id":$('#userId').val(),
                    "dataURL":photo
                },
                success:function(result) {
                    if(result.isOK==true){//头像上传成功
                        SuccessTipBottomRight(result.successMes);
                        var id =$('#userId').val();
                        // 将上传的头像的地址填入，为保证不载入缓存加个随机数
                        $('#user_avatar_mycenter').attr('src', '/app/images/'+id+'.jpg');
                        $('#user_avatar_navbar').attr('src', '/app/images/'+id+'.jpg');
                        $('#changeAvatarModal').modal('hide');
                    }else{//头像上传失败
                        ErrorTipBottomCenter(result.errorMes);
                    }
                },
                error:function(){
                    AjaxError();
                }
            });

controller层：

 @PreAuthorize("isAuthenticated()")  //需要认证通过
    @RequestMapping(value = "/userUploadAvatar",method = {RequestMethod.POST})
    @ResponseBody
    public Map,Object> UserUploadAvatar(String user_id, String dataURL) throws IOException {
        boolean isOK = false;
        isOK = userDtoService.uploadAvatar(dataURL,user_id);
        Map,Object> map = new HashMap,Object>();
        map.put("isOK", isOK);
        map.put("errorMes","遇到未知问题，请重试或联系管理员！");
        map.put("successMes","头像上传成功！");
        return map;
    }

service层：

@Override
    public boolean uploadAvatar(String dataURL,String userId) {
        String path = "E:/Springboot/app/src/main/resources/static/asserts/images/avatar";
        //System.out.println(path);
        String imgName=userId+".jpg";
        try{
            ComUtils.decodeBase64DataURLToImageAndUpload(dataURL, path, imgName);
            return true;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }

ComUtils类：

 public static void decodeBase64DataURLToImageAndUpload(String dataURL, String path, String imgName) throws IOException {
        //将dataURL开头的非base64字符删除
        String base64 = dataURL.substring(dataURL.indexOf(",") + 1);
        //讲Base64格式转化为二进制流
        byte[] decoderBytes = Base64.getDecoder().decode(base64);
        //目录不存在先创建目录
        File file = new File(path);if(!file.exists()){file.mkdirs();}
        //输出文件到服务器目录
        FileOutputStream write = new FileOutputStream(new File(path  + "/" + imgName));
        write.write(decoderBytes);
        write.close();
    }