formData原生实现图片上传

//修改头像--开始//
let btn = document.querySelector('#avatarImage')
let file = document.querySelector('#newuploadAvatar')

btn.onclick = function() {
    file.click() // 调取系统选择图片的弹框
}

// 监听input的file变化值
file.onchange = function (event) {
    let file = event.target.files[0]
    upload(file)
}

function upload(file) {
    let xhr = new XMLHttpRequest()
    xhr.open('post', 'updateavatar', true)
    let formData = new FormData()
    formData.set('filename', file)
    xhr.send(formData)
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('success')
        }
    }
}
//修改头像--结束//

html部分:

 <div class="avatar__edit">
                                            <img id="avatarPreloader" src="__IMG__/preload.svg">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                                                <path d="M0 9.002v2.368h2.368l6.986-6.985-2.37-2.37zm11.185-6.45a.63.63 0 0 0 0-.891L9.707.185a.63.63 0 0 0-.891 0L7.66 1.34l2.37 2.37 1.156-1.156z"
                                                      fill="#383E45" fill-rule="evenodd"/>
                                            </svg>
<!--                                            <label for="newuploadAvatar">-->
                                            <img id="avatarImage" src="{$user.headimg|default='__IMG__/avatarImage.png'}" width="110"  height="110">
<!--                                            </label>-->
                                        </div>
                                        <input type="file" id="newuploadAvatar"    style="opacity: 0;" accept="image/png, image/jpeg, image/gif, image/jpg" data-max-size="2048" >

参考:https://juejin.im/post/5aa01068f265da23970669ce