效果圖

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">請(qǐng)上傳身份證正面</view></view><view class="card-list"><image src='{{photos2}}' id="2" bindtap='touchphoto' mode='aspectFit'></image><view class="text">請(qǐng)上傳身份證反面</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({/*** 頁(yè)面的初始數(shù)據(jù)*/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, // 默認(rèn)9sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片var tempFilePaths = res.tempFilePathsthat.setData({photos: tempFilePaths})that.upLoadImg(tempFilePaths, 'card_user')}})} else if (no == "2") {wx.chooseImage({count: 1, // 默認(rèn)9sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有success: function (res) {// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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對(duì)象中創(chuàng)建JavaScript對(duì)象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();},})

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。