微信小程序证件照正反面上传

效果图

WXML

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

WXSS

.card-cont{display: flex;flex-direction: column;
}
.card-list {margin: 0 auto;
}
.text{width: 100%;height: 50rpx;text-align: center;
font-weight: bold;
}

Page({/*** 页面的初始数据*/data: {//身份证photos: "../../assets/images/shangchuan.png",photos2: "../../assets/images/shangchuan.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')}})} },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();},})

微信小程序证件照正反面上传相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
微信小程序实现录音上传
微信小程序实现录音上传准备开始准备 1.微信开发者工具 2.Api文档开始打开微信开发者工具项目->新建项目选择小程序 appid是在微信公众平台申请的. 链接新建完成后,项目自 ...
微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...

微信小程序证件照正反面上传

微信小程序证件照正反面上传相关推荐

最新文章

热门文章