微信小程序，上传身份证图片

小程序上传身份证图片，前端页面

效果图

话不多说，直接上代码

wxml

     <view class="ID-mian"><view class="card-name">请上传身份证认证</view><view class="card-cont"><view class="card-list"><image src='{{photos}}' id="1" bindtap='touchphoto' mode='aspectFit'></image><view>身份证正面照</view></view><view class="card-list"><image src='{{photos2}}' id="2" bindtap='touchphoto' mode='aspectFit'></image><view>身份证反面照</view></view><view class="card-list"><image src='{{photos3}}' id="3" bindtap='touchphoto' mode='aspectFit'></image><view>手持身份证照</view></view></view></view>

Page({/*** 页面的初始数据*/data: {//身份证photos: "/static/images/identity-zm.png",photos2: "/static/images/identity-fm.png",photos3: "/static/images/identity-man.png"},//上传身份证touchphoto: function (e) {var that = thisvar no = e.currentTarget.id;if (no == "1") {wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthat.setData({photos: tempFilePaths})that.upLoadImg(tempFilePaths, 'card_user')}})} else if (no == "2") {wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthat.setData({photos2: tempFilePaths})that.upLoadImg(tempFilePaths, 'card_guohui')}})} else if (no == "3") {wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsthat.setData({photos3: tempFilePaths})that.upLoadImg(tempFilePaths, 'card_hand')}})}},upLoadImg: function (list, type) {var that = this;this.upload(that, list, type);},//多张图片上传upload: function (page, path, type) {var that = this;var curImgList = [];for (var i = 0; i < path.length; i++) {wx.showToast({icon: "loading",title: "正在上传"}),wx.uploadFile({url: 填写你的接口,  //接口处理filePath: path[0],name: 'files',header: { "Content-Type": "multipart/form-data" },formData: {douploadpic: '1',token: _KMJH_Data.duoguan_user_token},success: function (res) {var imgdata = JSON.parse(res.data);//从json对象中创建JavaScript对象if (type == 'card_user') {that.setData({card_user: imgdata.savename})} else if (type == 'card_guohui') {that.setData({card_guohui: imgdata.savename})} else if (type == 'card_hand') {that.setData({card_hand: imgdata.savename})}if (res.statusCode != 200) {wx.showModal({title: '提示',content: '上传失败',showCancel: false})return;}var data = res.datapage.setData({  //上传成功修改显示头像src: path[0]})},fail: function (e) {wx.showModal({title: '提示',content: '上传失败',showCancel: false})},complete: function () {wx.hideToast();  //隐藏Toast}})}},onLoad: function (options) {var that = this// that.getusercard();},}

wxss

.ID-mian{position: relative;display: block;background: #fff;}
.card-name{color: #333;font-size: 26rpx;padding-left: 35rpx;margin-bottom: 35rpx;font-weight: bold}
.card-cont{display:flex;align-items: center;justify-content: space-around;margin-top: 15rpx;}
.card-list{width: 210rpx;text-align: center;margin: auto;position: relative}
.card-list image{width: 160rpx;height: 120rpx;position: relative;display: block;margin: auto;}
.card-list view{text-align: center;margin-top: 10rpx;color: #333;font-size: 25rpx;}

以上就是简单的身份证上传方式，是不是很简单呢

如果对你有帮助，欢迎打赏一下啦，

微信小程序，上传身份证图片相关推荐

《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传单张或多张图片
上传作品图片,上传头像(count=1),亲测有效分享一下核心代码,希望能帮助大家 1.wxml  <view class='upload-works' ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...
微信小程序上传多张图片，上传文件pdf等
wx.getFileSystemManager().readFileSync同步循环数组是可以拿到值的 wx.getFileSystemManager().readFile异步,但是加了这个就一直是空 ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
spring boot接收微信小程序上传的文件
spring boot接收微信小程序上传的文件,首先前台传给我们后端的不是一个路径,而是以一个文件类型传递给我,这时我们在controller层接收时就可以用MultipartFile进行接收,如果接 ...

微信小程序，上传身份证图片

微信小程序，上传身份证图片相关推荐

最新文章

热门文章