H5正常，安卓端报错，引入组件 ReferenceError: Blob is not defined
1***@qq.com
- 发布：2022-10-20 13:09
- 更新：2022-10-20 15:42
- 阅读：256
H5正常，安卓端报错
分类：uni-app
BoredApe - 有问题就会有答案。
非H5端不是浏览器环境不支持 Dom、Bom 接口，没有 Blob 也没有 document 。
这在uni-app文档开篇的介绍中有说明参考文档：区别于传统 web 开发的注意
您可以尝试使用renderjs引入操作DOM的库参考文档：renderjs
1***@qq.com (作者)
是这样吗？但是报错了哦
-
-
1***@qq.com (作者)
<script module="vue-cropper-h5" lang="renderjs">
</script>
<script>
import { getUserinfo,idCardUpload,authentication,faceRecognition } from '../../api/my.js'
import { isLogin,handleFileIdToURL,recursionCompressH5 } from '../../utils/util.js'
import { pathToBase64, base64ToPath } from 'image-tools'
import { isvalidIdCard } from '../../utils/validate.js'
import cropperh5 from "vue-cropper-h5"
export default {
data() {
return {
userinfo:{},
btnLoading:false,
// 正面、反面
fileType:null,
// 身份证正面
uidz:'',
uidz_url:'',
// 身份证反面
uidf:'',
uidf_url:'',
// 身份证Id
uid:'',
// 姓名
name:'',
};
},
components:{
cropperh5
},
methods:{
// 获取用户信息
async _getUserinfo(){
try{
let res = await getUserinfo()
this.userinfo = res
// 身份证正面
if(res.uidz){
this.uidz = res.uidz
this.uidz_url = handleFileIdToURL(res.uidz)
}
// 身份证反面
if(res.uidf){
this.uidf = res.uidf
this.uidf_url = handleFileIdToURL(res.uidf)
}
this.uid = res.uid
this.name = res.name
}catch(e){
//TODO handle the exception
console.log(e)
}
},
_input_name(e){
this.name = e.detail.value
},
_input_uid(e){
this.uid = e.detail.value
},
// 选择图片
_chooseImage(type){
let that = this
this.fileType = type
uni.chooseImage({
count:1,
sourceType:['camera'],
success:(res)=>{
recursionCompressH5(res.tempFilePaths[0],false,that._imageUpload)
},
fail:(res)=>{
console.log('fail:'+res)
}
})
},
// 图片上传
async _imageUpload(file){
let type = this.fileType
try{
uni.showLoading({ title: '上传中...' })
let res = await idCardUpload(file)
uni.hideLoading();
// 身份证正面
if(type == 1){
this.uidz = res.file
this.uidz_url = handleFileIdToURL(res.file)
}
// 身份证反面
if(type == 2){
this.uidf = res.file
this.uidf_url = handleFileIdToURL(res.file)
}
}catch(e){
//TODO handle the exception
uni.hideLoading();
console.log(e)
}
},
// 下一步
async _next(){
let that = this
let { uidz,uidf,name,uid } = this
if(!uidz){
uni.showToast({
title:'请上传身份证正面',
icon:'none'
})
return
}
if(!uidf){
uni.showToast({
title:'请上传身份证反面',
icon:'none'
})
return
}
if(!name){
uni.showToast({
title:'请输入姓名',
icon:'none'
})
return
}
if(!uid){
uni.showToast({
title:'请输入身份证号码',
icon:'none'
})
return
}
if(!isvalidIdCard(uid)){
uni.showToast({
title:'身份证号码格式不正确',
icon:'none'
})
return
}
try{
this.btnLoading = true
let params = {
uidz,
uidf,
name,
uid
}
await authentication(params)
this.btnLoading = false
// 拍照进行人脸识别
uni.showModal({
content:'点击确定拍照进行人脸识别',
showCancel:false,
success:(res)=> {
// 确定
if(res.confirm){
that._faceChooseImage()
}
}
})
}catch(e){
//TODO handle the exception
this.btnLoading = false
console.log(e)
}
},
// 拍照 进行人脸识别
_faceChooseImage(){
let that = this
uni.chooseImage({
count:1,
sourceType:['camera'],
success:(res)=>{
this.btnLoading = true
recursionCompressH5(res.tempFilePaths[0],true,that._faceRecognition)
},
fail:(res)=>{
console.log('fail:'+res)
}
})
},
async _faceRecognition(file){
console.log(file)
try{
// this.btnLoading = true
await faceRecognition({photo:file.split('data:image/png;base64,')[1]})
this.btnLoading = false
uni.showModal({
content:'实名认证成功，请开始使用',
showCancel:false,
success:(res)=> {
// 确定
if(res.confirm){
uni.reLaunch({
url: '/pages/index/index'
});
}
}
})
}catch(e){
this.btnLoading = false
//TODO handle the exception
console.log(e)
}
}
},
onLoad() {
if(!isLogin())return;
this._getUserinfo()
},
}
</script>
帮忙看看要怎么弄，感谢感谢
2022-10-20 16:02
