ajax+springboot上传图片讲解(修改用户头像)

亦凉 2021-05-07 20:35 1190阅读 0赞

## HTTP请求方法说明 ##

在讲解ajax请求实现前，我们先了解一下http常用的6个请求方法：

## jquery发送ajax请求，简化原生js发送ajax的繁琐过程 ##

ajax请求主要使用得比较多的两个场景就是，提交普通参数的请求和提交含有文件的请求，  
下面我将会通过编写两个小示例来说明

## 1.第一个使用ajax异步请求修改用户密码的小示例 ##

前端发送异步请求：

后端controller，使用springboot：

/**
         * 登录状态下，修改密码
         *
         * @return
         */
        @RequestMapping(value = "/updatePassword")
        @ResponseBody
        public Map<String,String> changePsd(@RequestParam(value = "userId") String userId,
                                            @RequestParam(value = "originalPsd") String originalPsd,
                                            @RequestParam(value = "newPsd") String newPsd) {
            Long Id = Long.parseLong(userId.trim());
            String originalPassword = MD5Util.getMD5(originalPsd);
            String newPassword = MD5Util.getMD5(newPsd);
            boolean flag = userService.updatePasswordByUserId(Id,originalPassword ,newPassword );
            Map<String,String> data = new HashMap<>();
            if (flag){
                data.put("code","success");
                data.put("msg","成功修改密码！");
                return data;
            }else {
                data.put("code","error");
                data.put("msg","修改密码失败，请稍后重试！");
                return data;
            }
        }

Mapper

UPDATE user set password = #{newPsd}
            where user_id = #{userId}
            and password = #{originalPsd}

## 2.第二个使用ajax异步发送formdata修改用户头像的小示例 ##

说明：修改头像，需要上传图片，不同于普通的提交参数，需要使用formdata发送文件数据流

html

页面效果  
![在这里插入图片描述][20200519152705431.png]  
js

$("#changeBtn").click(function () {
            var formData = new FormData();
            formData.append("photo",$('input#photo')[0].files[0]);    //拿到提交的图片文件
            formData.append("userId",$("#userId").val());   //需要把图片和用户关联起来
            $.ajax({
                url: "/changePhoto",
                type: 'POST',
                contentType: false,
                processData: false,
                data: formData,
                success: function (data) {   //请求成功时调用
                    $.alert({
                        title: data.code,
                        content: data.msg,
                    });
                    $("#userUrl").attr("src", data.userUrl); //使用jquery修改图片的src
                },
                error: function (data) {   //请求失败时调用
                    $.alert({
                        title: 'Error',
                        content: '修改头像失败，请稍后重试！',
                    });
                }
            });
        });

后端controller

/**
         * 修改个人头像
         *
         * @return
         */
        @RequestMapping(value = "/changePhoto")
        @ResponseBody
        public Map<String,String> changePhoto(@RequestParam MultipartFile photo, @RequestParam Long userId){
            Map<String,String> data = new HashMap<>();
            if (photo.isEmpty()){
                data.put("code","error");
                data.put("msg","上传图片为空！");
                return data;
            }
            //获取MultipartFile文件的后缀
            String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1);
            if (suffix.equalsIgnoreCase("jpg") ||
                    suffix.equalsIgnoreCase("jpeg") ||
                    suffix.equalsIgnoreCase("png")){
                OutputStream os = null;
                InputStream inputStream = null;
                String fileName = (userId + "") + System.currentTimeMillis() + ".jpg";
                String userUrl = savePath+fileName;
                try {
                    inputStream = photo.getInputStream();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    byte[] bs = new byte[1024];
                    int len;
                    // 输出的文件流保存到本地文件
                    File tempFile = new File(writePath);
                    if (!tempFile.exists()) {
                        tempFile.mkdirs();
                    }
                    os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);
                    // 开始读取
                    while ((len = inputStream.read(bs)) != -1) {
                        os.write(bs, 0, len);
                    }
                    os.flush();
                    userService.updateUserUserUrl(userId,userUrl);
                    System.out.println(userUrl);
                    data.put("userUrl", IpConfig.ip + userUrl);
                    data.put("code", "success");
                    data.put("msg","修改头像成功");
                    return data;
                } catch (IOException e) {
                    e.printStackTrace();
                    data.put("code","error");
                    data.put("msg","修改头像失败，请稍后重试！");
                    return data;
                } catch (Exception e) {
                    e.printStackTrace();
                    data.put("code","error");
                    data.put("msg","修改头像失败，请稍后重试！");
                    return data;
                } finally {
                    // 完毕，关闭所有链接
                    try {
                        os.close();
                        inputStream.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }else {
                data.put("code","error");
                data.put("msg","上传头像格式需要为jpg、jpeg、png！");
                return data;
            }
        }

Mapper

<update id="updateUserUserUrl">
    	 UPDATE user set user_url = #{userUrl}
    	 where user_id = #{userId}
    </update>

[20200519152705431.png]: /images/20210505/7ab4e31899b346e7807b04afe777cff9.png