人脸拍照上传base64编码转file类型的实现方法
最近在项目开发过程中,涉及到人脸拍照签到上传的业务功能,拍好的照片数据是base64编码,需要将照片的base64编码转为file类型的进行接口传参,这里简单记录一下。
调用本地摄像头进行拍照方法参考之前的博客:vue调用本地摄像头方法
1、自定义base64转blob方法、blob转file方法和base64直接转file方法,即先base64转blob,然后在blob转file。
①base64转blob方法:
dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr =atob(arr[1]);
var n = bstr.length;
var u8arr =new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime });
},
②blob转file方法:
blobToFile(blob, fileName){
blob.lastModifiedDate =new Date();
blob.name = fileName;
return blob;
},
③base64直接转file方法:
dataURLtoFile(dataurl, filename){
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
var blob = this.dataURLtoBlob(dataurl);
return this.blobToFile(blob, filename);
},
2、data区定义参数方法变量,用来进行方法调用传参:其中imgBaseCode变量用来接收你照片的base64编码:
file:'file',//文件名称
picFile:'',
imgBaseCode:'',//用来接收base64编码
3、base64转file方法调用:
//拍照上传 进行人脸识别
uploadStaffPic(){
//静态base64编码
/*this.file = this.dataURLtoFile(this.imgBaseCode, this.picFile);*/
//拍照获取实时的base64编码
this.file = this.dataURLtoFile(this.imgBaseCode, this.picFile);
this.formData = new FormData();//将文件以file:(binary)格式进行上传
this.formData.append('file',this.file)
this.$fetchPostFile('你的接口',this.formData).then(res=>{
if (res.code===0){
this.$message({
message:'签到成功!',
type:'success',
})
}else{
this.$message.error('签到失败!')
}
})
},
4、进行接口请求,接口传参成功,base64编码转file成功实现,请求结果如下:
实现完成,兄弟萌赶快试试吧!