跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

uniapp如何上传身份证

uniapp实现上传身份证的方法:首先打开上传证照页面;然后安装Dcloud插件市场模板;接着集成到自己的项目中,按项目的要求进行修改并使用;最后引入插件“pathToBase64”,并将图像路径转base64即可。 本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。 推荐(免费): uni-app教程 uniapp -app端上传证件(身份证/银行卡)照片后转base64发送给后台功能实现 功能描述: 如下图,点击首页右上角图标出现弹框,点击选择“上传身份证”或“银行卡”,选择好证照后,点击上传按钮,将图片上传到后台进行OCR识别。 解决方案: 关键点 1.上传证照界面实现;2.图片url转base64处理。 具体实现步骤如下 (1)点击按钮,点击首页右上角图标出现弹框,点击选择“上传身份证”或“银行卡”,跳转上传证照页面 template:
{{item.name}}
data: 综合实战(Vue3+Laravel8+Uniapp)课件 综合实战(Vue3+Laravel8+Uniapp)课件 下载
data(){ return{ cardTypeList:[{name:"上传身份证"},{name:"上传银行卡"}], } }
methods:
methods:{ upload(){ this.$refs.cardpopup.open() }, //选择上传身份证/银行卡 selectItem(index){ this.active=index; if(index==0){ // 选择上传身份证 uni.navigateTo({ url:"/pages/idcard/idcard" }) }else{ // 选择上传银行卡 uni.navigateTo({ url:"/pages/bankcard/bankcard" }) } }, }
style
(2)上传证照界面实现:安装Dcloud插件市场模板 graceUI [ 免费界面 ] - 身份证选择上传模板 ps:GraceUI上,提供了丰富的组件、布局及界面库,如登录注册,个人中心、头像裁剪、商城套装等,可直接使用,极大的提高了开发效率。https://www.graceui.com/ (3)安装插件后,就是集成到自己的项目中,按项目的要求进行修改并使用。 (4)图片url转base64处理:安装Dcloud插件市场插件 image-tools  图像转换工具,可用于图像和base64的转换 引入插件【pathToBase64】图像路径转base64
import { pathToBase64 } from '../../js_sdk/gsq-image-tools/image-tools/index.js'
使用插件,在图片上传后,将图片url转换为base64,并保存
methods: { // 选择身份证正面照片 selectImg1 : function() { uni.chooseImage({ count:1, success:(res)=>{ this.idCard1 = res.tempFilePaths[0]; //将图片url转换为base64 pathToBase64(res.tempFilePaths[0]).then(base64=>{ // console.log(base64) this.idCard1base64=base64 }).catch(error=>{ console.log(error) }) } }) } }
以下附上银行卡上传页面完整代码,上传身份证代码类似(建议将上传证照功能封装为可复用的组件)

相关文章