2020-08-20

uni-app开发实名认证页面一些技术总结

选择图片 上传图片和预览图片

问题描述:如何实现选择图片并且保存到本地缓存功能;

解决方式:给标签绑定ChooseImage事件,这是uniapp中选择本地图片并且上传图片至本地缓存的方法,这里通过点击时候传入type值,便于管理上传后图片的展示以及删除等功能

示例代码:

//html部分
<view class="solids" @tap="ChooseImage(0)" v-if="reverseImg.length<1">
	<text class='cuIcon-cameraadd'></text>
</view>

//js部分
methods:{
    ChooseImage(e){
        //调用uniapp中的选择图片方法
        uni.chooseImage({
            count:1//默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType:['album'],//album表示从相册中选择图片,camera表示使用相机,默认两者都有,使用一个的时候会直接打开相册或者相机
            success:(res) => {
                var that = this//解决this指向性问题
                if(type == 0){
                    //将文件路径保存到变量中
                    if (this.reverseImg.length != 0) {
					    this.reverseImg = this.imgList.concat(res.tempFilePaths)
				    } else {
					    this.reverseImg = res.tempFilePaths
				    }
				    this.imgList[0] = this.reverseImg;
				}
            }
        })
    }
}

问题描述:如何实现图片上传后预览&点击图片后提供原图预览

解决方式:图片上传后,通过变量把图片路径保存下来,通过双向数据绑定将图片路径和image标签绑定即可实现预览;点击图片原图预览需要在image标签外的view标签添加点击事件ViewImage(e,type),调用uni.previewImage方法提供点击后预览功能

示例代码:

//布局
		<view class="cu-form-group">
			<view class="grid col-1 grid-square flex-sub">
				<view class="bg-img" @tap="ViewImage($event,0)" :data-url="imgList[0]" v-if="imgList[0].length == 1">
				    <!--这里image标签绑定的src是本地图片的路径,mode表示图片以何种模式展示-->
					<image :src="imgList[0]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg(0)" :data-index="0">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage(0)" v-if="reverseImg.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
//JS部分
export default{
    methods:{
        ViewImage(e,type){
            uni.previewImage({
                urls: this.imgList[type]//这是保存所有上传图片路径的数组
                current:e.currentTarget.dataset.url;//current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。
            })
        }
    }
}

关于表单验证方式的一些思考

思路:表单验证的结果可以保存到数组中,通过判断数组长度来确认用户输入内容是否符合规范

示例代码:

validate() {
				this.errorList = [];
				if (this.userName == '') {
					this.errorList.push('姓名不得为空');
				}
				if (this.cut == 0) {
					if (this.identityCard == '') {
						this.errorList.push('身份证号码不得为空');
					} else {
						//身份证正则表达式
						var identityReg =
							/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
						if (!identityReg.test(this.identityCard)) {
							this.errorList.push('身份证号码格式不正确');
						}
					}
				}
		}
	
	//提交
			Submit() {
				if (!this.validate()) {
					console.log(this.errorList);
					//显示错误消息
					uni.showToast({
						title: this.errorList[0],
						icon: 'none'
					});

				} else {
					var that = this;
					//从缓存中取出token
					uni.getStorage({
						key: 'auth',
						success: function(res) {
							console.log(res.data);
							that.token = res.data;
							console.log(that.token.access_token, that.token.refresh_token)
							that.$http.post("member/authentication", {
								real_name: that.userName, //	真实姓名
								id_card_no: that.identityCard, //身份证号码
								front_img_path: that.front_img, //正面图片上传后返回的url
								back_img_path: that.back_img, //反面图片上传后返回的url
								hold_img_path: that.hold_img //持证图片上传后返回的url
							}, {
								isPrompt: true, //（默认 true 说明：本接口抛出的错误是否提示）
								load: true, //（默认 true 说明：本接口是否提示加载动画）
								header: { //默认 无 说明：请求头
									'Content-Type': 'application/json',
									'access-token': that.token.access_token,
									// 'refresh-token': that.token.refresh_token
								},
								isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数将失去作用）
							}).then(res => {
								console.log(res)
								uni.showToast({
									title: '上传实名信息成功,请等待审核,我们将在三个工作日之内完成审核',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}).catch(function(error) {
								//这里只会在接口是失败状态返回，不需要去处理错误提示
								console.log(error);
								uni.showToast({
									title: '提交失败,请联系管理员',
									icon: 'none'
								});
							});
						}
					});

				}
			}