uniapp如何上傳身分證

uniapp實作上傳身分證的方法：先開啟上傳證照頁面；然後安裝Dcloud外掛程式市場範本；接著整合到自己的專案中，按專案的要求進行修改並使用；最後引入外掛程式“pathToBase64” ，並將影像路徑轉base64即可。

本教學操作環境：windows7系統、uni-app2.5.1版本，Dell G3電腦。

推薦（免費）：uni-app教學

uniapp-app端上傳證件（身分證/銀行卡）照片後轉base64發送給後台功能實作

功能描述：

如下圖，點擊首頁右上角圖示出現彈框，點擊選擇“上傳身分證”或“銀行卡”，選擇好證照後，點擊上傳按鈕，將圖片上傳到後台進行OCR識別。

   

解決方案：

關鍵點 1.上傳憑證介面實作；2.圖片url轉base64處理。

具體實現步驟如下

（1）點擊按鈕，點擊首頁右上角圖示出現彈框，點擊選擇“上傳身分證”或“銀行卡”，跳到上傳證照頁面

template:

<view @click="upload" class="iconfont icon-paizhao2"></view>


<!-- 选择证件弹窗 -->	
<uni-popup ref="cardpopup" type="bottom">
	<view class="dialog" >
			<view @click="selectItem(index)" :class="active==index ? &#39;active&#39;:&#39;&#39;" v-for="(item,index) in cardTypeList" :key="index">
				{{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 lang="scss">
.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)=>{
					this.idCard1 = res.tempFilePaths[0];
					//将图片url转换为base64
					pathToBase64(res.tempFilePaths[0]).then(base64=>{
						// console.log(base64)
						this.idCard1base64=base64
					}).catch(error=>{
						console.log(error)
					})			
				}
			})
		}
}

以下附上銀行卡上傳頁面完整程式碼，上傳身分證程式碼類似（建議將上傳證照功能封裝為可重複使用的元件）

<template>
	<!-- 上传银行卡页面 -->
	<view>
		<view class="grace-idcard-main">
			<view class="grace-idcard-desc">
			</view>
			<view class="grace-idcard-text">
				银行卡照片 ( 正面 )
			</view>
			<view class="grace-idcard-items">
				<view class="grace-idcard-uper-btn" @tap="selectImg">
					<view class="img"><image src="../../static/images/camera.png" mode="widthFix" /></view>
					<view class="text">拍摄或选择照片</view>
				</view>
				<view class="grace-idcard-preview">
					<image :src="bankCard"  @tap="previewImg" mode="widthFix"></image>
				</view>
			</view>
			<view style="margin-top:38upx;">
				<button type="primary" @tap="uploadCards">上传</button>
			</view>
		</view>
	</view>
</template>
<script>
import { pathToBase64  } from '../../js_sdk/gsq-image-tools/image-tools/index.js'
var _self;
export default {
	data() {
		return {
			bankCard : '../../static/images/bankcard.jpg',
			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 == '../../static/images/bankcard.jpg'){
				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中文網其他相關文章！