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

HTTP请求方法说明

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

方法	功能说明
GET	向特定的资源发出请求，url会被标识在浏览器地址栏
POST	向指定资源提交数据进行处理请求，例如提交表单或者上传文件。
PUT	向指定资源位置上传其最新内容
DELETE	请求服务器删除Request所标识的资源
HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头

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

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

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

前端发送异步请求：

function updatePsd() {
        var originalPsd = $("#originalPsd").val();  //原密码
        var newPsd = $("#newPsd").val();  //新密码
        var userId = $("#userId").val();   //用户id
        $.ajax({
            url: "/updatePassword",    //请求url
            type: 'POST',   //请求方法
            data: {       //请求参数
                "originalPsd": originalPsd,
                "newPsd": newPsd,
                "userId": userId
            },
            success: function (data) {  //请求成功时调用
                $.alert({
                    title: data.code,
                    content: data.msg,
                });
            },
            error: function (data) {  //请求失败时调用
                $.alert({
                    title: 'Error',
                    content: '修改密码失败，请稍后重试！',
                });
            }
        });
    }

后端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

<style type="text/css">
   .file {
        position: relative;
    }
    .file input {
        position: absolute;
        font-size: 18px;
        right: 0;
        top: 0;
        opacity: 0;
    }
</style>
<div class="col-md-2" style="margin-top: 10px;">
    <label class="control-label file">
        <div>            //原头像
            <img id="userUrl"  style="border-radius: 100px;" src="${user.userUrl}"> //后端传过来的url
        </div>
        <input type="file" id="photo">
        <input type="hidden" id="userId" value="${user.userId}">
    </label>
    <p style="margin-left: 20px;">点击头像选择图片，再点击上传</p>
    <input id="changeBtn" style="width: 100px;margin-left: 20px;" class="btn btn-info" value="上传">
</div>

页面效果

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>