點擊頭像上傳圖片到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標籤加上寬高，不然圖片會按原大小顯示

最終結果：