file图片上传转换成Base64，然后提交给后端

光阴的故事
阅读 1098 
HTML部分: <img src="{{$loginInfo['avatar']}}" id='img_head'/><br/><a class="btn btn-hollow"><input unselectable="on" type="file" class="hide" id="upimg"/>更改头像</a>

JS:

<script>
    var domain = '{{$main_domain}}'
    window.onload = () => {
        let upDOM = document.getElementById('upimg')
        upDOM.addEventListener('change', (e) => {
            var reader = new FileReader();
            reader.readAsDataURL(upDOM.files[0]);
            reader.onload = function(ie) {
                var Base64Val = this.result;
                //console.log('Base64')
                console.log(Base64Val)
                upFile(Base64Val)
            }
        })
    }
    function upFile(baseData) {
        $.ajax({
            url: domain + "/upload/img", //请求路径
            type: "POST", //请求方式
            data: {
                "data": baseData,
            },
            dataType: "json", //设置接受到的响应数据的格式
            //回调函数
            success: function(data) {
                console.log(data);
                if (data && data.errcode == 1) {
                    alert(data.errmsg)
                } else {
                    $("#hid_imig").val(data.data.url)
                    $("#img_head").attr('src', data.data.url)
                }
            },
            error: function() {
                console.log("出错啦...")
            } //表示如果请求响应出现错误，会执行的这个回调函数
        })
    }
</script>
文章来源：网络 版权归原作者所有,如涉及知识产权问题，请权利人联系我们，我们将立即处理.
标签:
专栏:   前端经验分享
光阴的故事
光阴的故事
文章 5 获得 0个赞 共 0个粉丝

推荐阅读 更多精彩内容