【Vue/React】vue项目中如何利用base64上传图片与文件

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

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

<input @change="uploadPhoto($event)" type="file" class="kyc-passin">

（2）利用fileReader对象获取图片或者文件的base64 编码

包括 获取File， 设置图片限制大小，及获取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将获取到的图片或文件的编码传给后台即可