简单的用户头像修改功能(springboot后台)

最近做了一个网站：www.qihea.xyz，实现了一个小功能-头像修改，记录一下实现过程。

说来有点惭愧，这js代码是抄袭的...而且忘了从哪抄的了。

实现效果：

提交后

抄袭的也要厚着脸皮说是我凭本事抄的：抄袭不问出处...

1.clear()代码是为了添加一个图片后，不满意再继续换，需要先清除之前的再添加新的来实现。

2.插件我看不懂，这东西没接触过(  ′  д｀ )…彡…彡

3.后台操作讲解：（我透，这也是抄的...）https://blog.csdn.net/koushr/article/details/51193857

    1.上传文件，

    2.验证文件类型，可以参考：Java判断文件是否为图片

    我直接根据后缀名验证的，虽然在js代码中已经筛选了不是图片的上传文件(file.type.match(imageType))，但是还是需要验证。可是我后台这种只处理后缀名的办法非常不可靠，等有机会了会重写一下。

    3.然后生成文件路径:filepath\token.文件类型,保存到文件中。

    4.将文件路径保存到数据库中。

4.获取图片的后台操作：

见代码，很简单。

 

    
    
    
    


个人信息：
    

        用户名：
        
    

    性别：
    


    个性签名：
    

我的头像:



    

        

            

                选择新头像：
            
            

                

                    
                    
                    

                    
                
            
        
    

 @ResponseBody
    @PostMapping(value = "/imageUpload")
    public String saveImage(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request){
        String filepath="/root/image/";
        if (file.isEmpty()) {
            System.out.println("文件为空空");
            return "文件为空空";
        }
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            // 遍历数组
            for (Cookie cookie : cookies) {
                //如果有token
                if (cookie.getName().equals("token")) {
                    // 取出cookie的值
                    String value = cookie.getValue();
                    //如果accesstoken不为空的话
                    //生成文件路径
                    String fileName = file.getOriginalFilename();  // 文件名
                    //后缀名
                    String suffixName = fileName.substring(fileName.lastIndexOf("."));
                    if (!".jpg".equals(suffixName) && !".jpeg".equals(suffixName) && !".png".equals(suffixName) && !".bmp".equals(suffixName)
                            && !".gif".equals(suffixName)) {
                        return "上传失败:无效图片文件类型";
                    }
                    long fileSize = file.getSize();
                    if(fileSize>1024*500){
                        return "图片过大";
                    }
                    filepath=filepath+value+suffixName;
                    File dest = new File(filepath);
                    if (!dest.getParentFile().exists()) {
                        dest.getParentFile().mkdirs();
                    }
                    try {
                        file.transferTo(dest);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    //修改数据库
                    String iconUrl="/imageGet/"+value+suffixName;
                    usrService.updateIcon(iconUrl,value);
                    break;
                }
            }
        }
        return "success";
    }

从文件系统中读取文件。

 @RequestMapping(value = "/imageGet/{name}",produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] getImage(/*@PathVariable("place")String place,*/
                           @PathVariable("name")String name){
        String filepath="/root/image/";
        File file = new File(filepath+name);
        FileInputStream inputStream = null;
        byte[] bytes =null;
        try {
            inputStream = new FileInputStream(file);
            bytes = new byte[inputStream.available()];
            inputStream.read(bytes, 0, inputStream.available());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return bytes;
    }