Vue+Base64实现图片上传

base64介绍
使用样例

base64介绍

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。通俗点来讲，它可以将不算大的文件或图片转为字符，这样就可以将文件或图片存到数据库中了。

使用样例

要做一个如下图的项目，使页面具有上传图片，预览图片的功能
Vue+Base64实现图片上传

vue代码:

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">
<img :src="formInline.img" alt="">

uploadPhoto (e) {
        // 利用fileReader对象获取file
        var file = e.target.files[0];
        var filesize = file.size;
        var filename = file.name;
        // 2,621,440   2M
        if (filesize > 2101440) {
            // 图片大于2MB
    
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
    
            // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
            var imgcode = e.target.result;
            this.formInline.img=imgcode
            console.log(this.formInline.img);
        }
    }

打印出来的base64编码
Vue+Base64实现图片上传
存入数据库的时候，要把该字段设置为longtext型，否则存进去的base64编码是不完整的