前端在进行资源文件上传的时候,可以借助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将获取到的图片或文件的编码传给后台即可。