头像上传与显示 SpringBoot

头像上传与显示

Controller

• 形参的名字不要变
• 最关键是uploadFile.transferTo()，使文件上传简便了许多
• 上传文件后存入数据库，我加了一个/img/，因为我是存在服务器中的img路径下的，记得在项目中一定要先创建一个img，
  其实不我怎么懂服务器和我IDEA中项目到底怎样的关系。我抱着试一试的态度，发现创建了一个img后，上传的内容也可以从这儿取到，
  所以才在数据库中存入地址中加了img，到时候在前端中可以直接
  src="/img/..."

//文件上传
    @RequestMapping("/up")
    public String up(MultipartFile uploadFile, HttpSession session) throws IOException {
        //获取上传文件名称
        String fileName = uploadFile.getOriginalFilename();
        //uuid+后缀名，给文件重新取名
        String finalFileName = UUID.randomUUID() + fileName.substring(fileName.lastIndexOf("."));
        //最后存储的路径，是本地的服务器中
        String path = session.getServletContext().getRealPath("img")+ File.separator + finalFileName;
        System.out.println(path);
        //上传
        File file = new File(path);
        uploadFile.transferTo(file);

        //上传成功后，将地址存入数据库，让前端可以直接拿图片
        String idPic = "/img/" + finalFileName;
        User user = new User();
        user.setIdPic(idPic);
        //获取id值
        user.setUserId(2);
        userService.updateUser(user);

        return "success";
    }

页面

<form  action="/up" enctype="multipart/form-data" method="post" style="display: none;" id="show_up">
	<input type="file" name="uploadFile"/>
	<input type="submit"/>
</form>

页面进阶版（将form隐藏，通过单击事件触发）

Ajax

• 将原来的图片删除，再添加进去

//个人基本资料回显
function show_myself(){
    $.ajax({
        url: "/getUserById",
        type: "post",
        dataType: "json",
        success: function(userById){

            //获取图片路径
            $(".logo").remove();
            var str = "<div class=\"logo\" style=\"background-image:url(&quot;"+ userById[0].idPic +"&quot;);\" data-v-8dc533f6>\n</div>";
            $("#insert_img").prepend(str);

        },
        error: function(){
            alert("Error");
        }
    })
}