Vue+Base64实现图片上传

kirin

发布于 2020-11-03 11:26:06

1.8K0

发布于 2020-11-03 11:26:06

文章被收录于专栏：Kirin博客

base64介绍

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

使用样例

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

vue代码:

需要注意的是当你使用了 vuetify ui的时候，恰巧又使用了它的input file 组件的时候

你需要改动如下代码，比如 e.target.files 直接替换成 e 即可，e就是默认选中了当前文件

需要的到size 直接 e.size 或者e.name 就可以分别得到不同的属性值，你可以在console.log 中打印一次就知道了

<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编码