js上传图片代码实现

 <div class="edit-avatar">
                        <img src="${ (user.userAvatar) !}" alt="..." class="img-avatar">
                        <div class="avatar-divider"></div>
                        <div class="edit-avatar-content">


                              <button class="btn btn-default"  id="change_avatar">修改头像
                                 </button>

                            <input type="file" id="_avatar_file" name="file" class="hidden" />

                            <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
                        </div>
                    </div>

$('#change_avatar').click(function (e) {
    console.log('点击了')
    $('#_avatar_file').click()
})
const imgAvatar = $('.img-avatar');
$('#_avatar_file').change(function () {
    //input 隐藏域 收到后 自动触发上传
    const data = new FormData();
    data.append('file',_val('#_avatar_file'))
    _$_ajax_formData({
        url:'/api/file',
        data: data,
        success: function (res) {
            if (res.code==200) {
                console.log(res)
                _successInfo()
                imgAvatar.attr('src',res.data.url+'?@64h_64w_1e')
                _set_name_val('userAvatar',res.data.url)
            }else{
                _errorInfo()
            }
        },
        error: function (res) {
            _errorInfo()
        }
    })
})