html上传图片

参考地址：https://www.cnblogs.com/zimengxiyu/p/11359053.html

1.上传框

            <div class="formItem">
                <div class="formFlex">
                    <label style="font-size: 16px;">头像</label>
                    <div class="edit">
                        <img th:src="${user.avatar}" class="photo">
                        <input type="file" id="file" name="file">
                        <img src="./img/bianji.png" alt="">
                    </div>
                </div>
                <div class="transition">
                    <div class="opera">
                        <button class="confirm editConfirm upload">确定</button>
                        <button class="cancel editCancel">取消</button>
                    </div>
                </div>
            </div>

2.请求后端接口获取图片地址

<script>
    var file = document.getElementById('file');
    var image = document.querySelector("img");
    file.onchange = function () {
        var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
        var pettern = /^image/;
        if (!pettern.test(fileData.type)) {
            alert("图片格式不正确");
            return;
        }
        var formData = new FormData();
        formData.append("file", fileData);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/upload/image", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var res = JSON.parse(xhr.responseText);
                if (res.code === 200) {
                    var imageUrl = res.data;
                    image.setAttribute("src", imageUrl);
                } else {
                    alert(res.msg);
                }
            }
        };
        xhr.send(formData);
    }
</script>

3.修改用户信息

        //修改头像
        if ($(this).hasClass('editConfirm upload')) {
            var image = document.querySelector("img");
            var data = {
                avatar: image.getAttribute("src")
            }
            sa.ajax("/user/update", data, function (res) {
                layer.msg(res.msg, {anim: 0, icon: 6});
                setTimeout(function () {
                    location.reload();
                }, 800)
            })

        }