登录  /  注册
首页 > web前端 > uni-app > 正文

uniapp如何上传身份证

藏色散人
发布: 2021-01-26 12:00:50
原创
5811人浏览过

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

uniapp如何上传身份证

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

推荐(免费):uni-app教程

uniapp-app端上传证件(身份证/银行卡)照片后转base64发送给后台功能实现

功能描述:

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

   

解决方案:

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

具体实现步骤如下

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

template:

<view></view><!-- 选择证件弹窗 --><uni-popup><view><view>
				{{item.name}}
			</view></view></uni-popup>
登录后复制

data:

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

<style>
.dialog{
	background-color: #fff;
	padding:40rpx;
	border-radius: 15px;
	margin:10rpx;
	view{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-bottom: 6px;
	}
	.active{
		background-color: red;
		border-radius: 80rpx;
		color:#fff;
		
	}
}
</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)=&gt;{
					this.idCard1 = res.tempFilePaths[0];
					//将图片url转换为base64
					pathToBase64(res.tempFilePaths[0]).then(base64=&gt;{
						// console.log(base64)
						this.idCard1base64=base64
					}).catch(error=&gt;{
						console.log(error)
					})			
				}
			})
		}
}
登录后复制

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

<template><!-- 上传银行卡页面 --><view><view><view></view><view>
				银行卡照片 ( 正面 )
			</view><view><view><view><image></image></view><view>拍摄或选择照片</view></view><view><image></image></view></view><view><button>上传</button>
			</view></view></view></template><script>
import { pathToBase64  } from &#39;../../js_sdk/gsq-image-tools/image-tools/index.js&#39;
var _self;
export default {
	data() {
		return {
			bankCard : &#39;../../static/images/bankcard.jpg&#39;,
			bankCardBase64:null
		};
	},
	onLoad:function(){
		_self = this;
	},
	methods: {
		// 选择银行卡正面照片
		selectImg : function() {
			uni.chooseImage({
				count:1,
				success:(res)=>{
					this.bankCard = res.tempFilePaths[0];
					//将图片url转换为base64
					pathToBase64(res.tempFilePaths[0]).then(base64=>{
						this.bankCardBase64=base64
					}).catch(error=>{
						console.log(error)
					})
				}
			})
		},
		// 预览银行卡正面照片
		previewImg: function(){
			uni.previewImage({
				urls:[_self.bankCard]
			});
		},
		// 上传银行卡
		uploadCards : function(){
			if(this.bankCard == &#39;../../static/images/bankcard.jpg&#39;){
				uni.showToast({title:"请选择银行卡照片", icon:"none"});
				return;
			}
			uni.showLoading({title:"上传中"});
			var param={
				type:2,
				images:[
					{
						side:"front",
						image:this.bankCardBase64,
						orderNum:1
					}
					
				]
			}
			// 向后台发送请求
			this.$myRequest({
				url:"card/ocr",
				method:"POST",
				data:param
			}).then(res=>{
				console.log("上传银行卡返回结果:",res)
				if(res.data.respCode=="00000"){
					uni.hideLoading();
					uni.showToast({title:res.data.respDesc,icon:"none"})
					uni.navigateTo({
						url:"/pages/cardInfo/cardInfo?data="+JSON.stringify(res.data.result)
					})	
				}else{
					uni.hideLoading();
					uni.showToast({title:res.data.respDesc,icon:"none"})
				}
			})
		}
	},
}
</script><style>
view{font-size:28upx;}
.grace-idcard-main{margin:20upx 30upx;}
.grace-idcard-desc{line-height:2em; background:#FFFFFF; padding:40upx; border-radius:10upx;}
.grace-idcard-text{line-height:2em; margin-top:30upx;}
.grace-idcard-items{background:#FFFFFF; padding:30upx 0; display:flex; margin:30upx 0; border-radius:10upx; align-items: flex-start;}
.grace-idcard-uper-btn{width:276upx; margin:0 60upx; background:#F1F1F1; padding-bottom:10upx; border-radius:10upx; text-align:center;}
.grace-idcard-uper-btn .img{width:100upx; height:100upx; margin:0 auto; margin-top:30upx;}
.grace-idcard-uper-btn .img image{width:100upx; height:100upx;}
.grace-idcard-uper-btn .text{width:100%; margin-top:10upx; text-align:center; line-height:2em;}
.grace-idcard-preview{width:50%; margin:0 30upx; }
.grace-idcard-preview image{width:100%; border-radius: 10rpx;}
</style>
登录后复制

以上就是uniapp如何上传身份证的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号