人脸拍照上传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成功实现，请求结果如下：

实现完成，兄弟萌赶快试试吧！