人脸拍照上传base64编码转file类型的实现方法

人脸拍照上传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成功实现,请求结果如下:
在这里插入图片描述在这里插入图片描述
实现完成,兄弟萌赶快试试吧!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值