vue项目中如何利用base64上传图片与文件

前端在进行资源文件上传的时候，可以借助HTML5中，fileReader对象进行图片和文件的上传。利用该对象提供的一些属性方法更加方便的获取所上传的文件信息。在vue项目中操作方法如下：

 

1）绑定input[type=‘file’]的change事件

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">
2）利用fileReader对象获取图片或者文件的base64 编码

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 = function (e) {
 
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        var imgcode = e.target.result;
        console.log(imgcode);
    }
},
3）再利用ajax将获取到的图片或文件的编码传给后台即可。