uniapp简单的身份证照片（正反面）上传

这是没有进行身份证照片验证的如果要判断上传的图片是否为身份证可以参考阿里云的
阿里云身份证验证超链接
最后放上了上传身份证图片的人像框和国徽框
引入的js文件在图片后面
wxml

<template><view class="ID-mian"><h3>身份证正面(上传)</h3><view class="card-zheng"><view class="zheng_left" v-show="isShow"><image src="../../static/zheng.png" mode="" @tap='touchphoto1'></image></view><view class="zheng_right" v-show="!isShow"><image :src="V_TPID"></image></view></view><h3>身份证反面(上传)</h3><view class="card-fan"><view class="fan_left" v-show="isShow1"><image src="../../static/fan.png" mode="" @tap='touchphoto2'></image></view><view class="fan_right" v-show="!isShow1"><image :src="V_TPID1"></image></view></view><view style="display: flex;align-items: center;margin-top: 10px;"><button style="width: 100%;height:40px;line-height: 40px; color:white;background-color: #39B54A;font-size: 14px;"@click="back">确认上传</button></view></view>
</template>

const util = require('@/util.js');
export default {data(){return{V_TPID: '',V_TPID1: '',curl: '',isShow:true,isShow1:true,}},onLoad(option) {this.curl = 后台请求地址;},methods: {//上传身份证touchphoto1() {let that = thiswx.chooseImage({count: 1, // 默认9success: function(res) {util.showLoading('图片上传中...');uni.request({url: 你的接口, data: {参数},header: {//自定义请求头信息},method: 'POST',success: (info) => {if (info.data.errcode == "00000") {that.V_TPID = info.data.V_TPIDthat.isShow=falseuni.showToast({icon: 'none',title: "上传成功",duration: 4000});util.hideLoading();} else {uni.showToast({icon: 'none',title: info.data.msg,duration: 4000});util.hideLoading();}util.hideLoading();},error: (info) => {util.hideLoading();},});},})},touchphoto2() {let that = thiswx.chooseImage({count: 1, // 默认9success: function(res) {util.showLoading('图片上传中...');uni.request({    url: 接口地址。data: {参数},header: {//自定义请求头信息},method: 'POST',success: (info) => {if (info.data.errcode == "00000") {that.V_TPID1 = info.data.V_TPIDthat.isShow1=falseuni.showToast({icon: 'none',title: "上传成功",duration: 4000});} else {uni.showToast({icon: 'none',title: info.data.msg,duration: 4000});util.hideLoading();}util.hideLoading();},error: (info) => {util.hideLoading();},});}})},//返回上一页back(){if(this.isShow==false && this.isShow1==false){uni.navigateBack()}else{uni.showToast({icon: 'none',title: "身份证信息未完善",duration: 4000});util.hideLoading();}}},}

css

.ID-mian {background-color: white;}.card-zheng {width: 100%;height: 200px;display: flex;justify-content: space-around;}.zheng_left {width: 70%;height: 100%;display: inline-block;}.zheng_left image {width: 90%;height: 60%;line-height: 70%;margin-top: 30px;margin-left: 10px;}.zheng_right {width: 70%;height: 100%;display: inline-block;}.zheng_right image {width: 90%;height: 60%;line-height: 70%;margin-top: 30px;margin-left: 10px;}.card-fan {width: 100%;height: 200px;display: flex;justify-content: space-around;}.fan_left {width: 70%;height: 100%;display: inline-block;}.fan_left image {width: 90%;height: 60%;line-height: 70%;margin-top: 30px;margin-left: 10px;}.fan_right {width: 70%;height: 100%;display: inline-block;}.fan_right image {width: 90%;height: 60%;line-height: 70%;margin-top: 30px;margin-left: 10px;}

util.js

/* 2. 设置加载动画 */
export function showLoading(message) {if (wx.showLoading) {    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理wx.showLoading({title: message, mask: true});} else {    // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失wx.showToast({title: message, icon: 'loading', mask: true, duration: 20000});}
}
export function hideLoading() {if (wx.hideLoading) {    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理wx.hideLoading();} else {wx.hideToast();}
}

uniapp简单的身份证照片（正反面）上传相关推荐

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...
uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...
ASP.NET Web API实现简单的文件下载与上传
ASP.NET Web API实现简单的文件下载与上传.首先创建一个ASP.NET Web API项目,然后在项目下创建FileRoot目录并在该目录下创建ReportTemplate.xlsx文件, ...
七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
uniapp APP用户修改头像(上传到OSS)
uniapp APP用户修改头像(上传到OSS) 点击头像进行修改头像点击头像跳转到新的页面(先判断用户是否登陆),选择图片,确认上传. <image class="portrait ...
上传身份证照片js_js上传身份证正反面
图片生成 * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body { font-size: 12px; ...
[server]基于uniapp创建小程序并上传照片到阿里云OSS
先说在前头,最近忙,随想随记,所以有些博客写了一半就发了,后续会慢慢补齐的.抱歉! 前端使用uniapp开发,后台挂在阿里云.选uniapp开发的原因是我这边人手不够,同时也不想维护这么多客户端,故选 ...
基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像基 ...
Vue封装一个简单轻量的上传文件组件
一.之前遇到的一些问题项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false& ...

uniapp简单的身份证照片（正反面）上传

uniapp简单的身份证照片（正反面）上传相关推荐

最新文章

热门文章