点击头像上传图片到SpringBoot后台

1、点击选择

给图片设置点击事件，点击头像的时候，隐藏input框，选中图片后放在input中，方便提交。选中一个头像图片后，将图片传给隐藏的input，点击上传的时候，提交到后台。

<div class="head_img" style="margin: 0 auto">
    <!--  一定要给img标签加上宽高，不然图片会按原大小显示  -->
   <a id="fileSelect" > <img id="avatar_img" src="/static/img/user1-128x128.jpg" width="128px"        height="128px"  style="background: #fff;margin-top: 4px"class="img-circle" title="点击选择头像"/></a>
    <p th:text="${name}" style="font-size: 18px;margin: 10px 17px 4px;"></p>
    <input type="file" id="fileElem" multiple accept="image/*" style="display: none;"
    onchange="handleFiles(this.files)"/>
    <a id="commitImg" href="javascript:commitImg();" style="margin-left: 23px;" class="btn btn-           default btn-flat">上传头像</a>
</div>

<script type="text/javascript">
	// 上传头像
    let fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem");
    fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);

    function handleFiles(files) {
        var choose_file = files[0];
        // 截取图片名称小数点后的字符串
        var ftype = choose_file.name.substring(choose_file.name.lastIndexOf(".") + 1);
        // 校验格式是否是图片类型
        if (ftype == "jpg" || ftype == "png" || ftype == "jpeg" || ftype == "JPG") {
            // 限制大小，照片大小不能超过1M
            var size = choose_file.size / 1024 / 1024;
            if (size > 1) {
                layer.alert("头像不能大于1M", function (index) {
                    layer.close(index);
                });
                return false;
            }
            // 实例化一个阅读器对象
            var reader = new FileReader();
            // 读取文件的路径，没有返回值,结果在reader.result里
           reader.readAsDataURL(choose_file);
            // 读取需要时间，读完后再修改图片路径
            reader.onloadend = function () {
                // 回显
                $("#avatar_img").attr("src", this.result);
            }

        } else {
            layer.alert("头像格式不对，请重新选择！", function (index) {
                layer.close(index);
            });
            return false;
        }
    }
    function commitImg() {
        var formData = new FormData();
        formData.append("file",$("#fileElem")[0].files[0]);
        $.ajax({
            url: "/demo/headImg",
            type: "POST",
            data: formData,
            processData:false,
            contentType:false,
            success:function (data) {
                if (data === "OK")
                    layer.msg("上传成功！");
                else
                    layer.msg("上传失败！")
            }
        })
    }
</script>

后端代码

@ApiOperation("上传头像")
    @RequestMapping(value = "/headImg", method = RequestMethod.POST)
    @ResponseBody
    public Object headImg(MultipartFile imgFile) {
        String name = imgFile.getOriginalFilename();
        String path = "D://file/headImg/";
        
        // 判断目录是否存在,这样做，效率变低，每次都去检查文件花费时间
        // 建议采用在项目启动的时候将目录建好,下面三行代码删除
        File file = new File(path);
        if (!file .exists()  && !file .isDirectory()){
            file.mkdir();
        }
        
        String s = "";
        try {
            imgFile.transferTo(new File(path+name));
            // 将路径存在数据中
            s = sysUserService.updateImg(path);
        }catch (IOException e){
            e.printStackTrace();
            return R.fail(s);
        }
        return R.success(s);
    }

注意：一定要给img标签加上宽高，不然图片会按原大小显示

最终结果：