uniapp如何上传身份证

藏色散人

发布时间：2021-01-26 12:00:50

6848人浏览过

来源于php中文网

原创

uniapp实现上传身份证的方法：首先打开上传证照页面；然后安装Dcloud插件市场模板；接着集成到自己的项目中，按项目的要求进行修改并使用；最后引入插件“pathToBase64”，并将图像路径转base64即可。

uniapp如何上传身份证

本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。

功能描述：

如下图，点击首页右上角图标出现弹框，点击选择“上传身份证”或“银行卡”，选择好证照后，点击上传按钮，将图片上传到后台进行OCR识别。

解决方案：

关键点 1.上传证照界面实现；2.图片url转base64处理。

具体实现步骤如下

（1）点击按钮，点击首页右上角图标出现弹框，点击选择“上传身份证”或“银行卡”，跳转上传证照页面

template:




	

	
			
				{{item.name}}

data:

支付宝账户登录ecshop插件

支付宝账户登录ecshop插件简介：先向支付宝申请支付接口，拿到合作身份者ID和安全检验码这两个东西。把login整个文件夹传到服务器上ecshop安装所在的目录，如果路径不对可以会导致使用失败。需要修改的文件：alipay_config.php return_url.php可以修改第30行的邮箱域名为你的网站域名。别的不用改，否则会导致无法使用。

下载

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)
					})			
				}
			})
		}
}

以下附上银行卡上传页面完整代码，上传身份证代码类似（建议将上传证照功能封装为可复用的组件）