效果圖

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; }

JS

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();},})

總結

以上是生活随笔為你收集整理的微信小程序证件照正反面上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。