国家住房城乡建设部网站,设计素材网站p开头的,外贸网站用wordpress,网站建设所面临的问题写在前面#xff1a;实现的逻辑是拍照上传调用后端封装好的身份证接口#xff0c;然后同时调用七牛云接口把照片传过去以便后台管理系统审核看1:首选需要这么一张页面接下来就写我是怎么做的首先是布局#xff08;以下是wxml#xff09; viewview classidcard实现的逻辑是拍照上传调用后端封装好的身份证接口然后同时调用七牛云接口把照片传过去以便后台管理系统审核看1:首选需要这么一张页面 接下来就写我是怎么做的首先是布局以下是wxml viewview classidcardimage classidcard_front catchtapuploadImageFront src{{idCardUrlFront}}/imageview classidcard_front_desc扫描身份证人像面/view/viewview classidcardimage classidcard_front catchtapuploadImageBack src{{idCardUrlBack}}/imageview classidcard_front_desc扫描身份证国徽面/view/viewview classsubmit {{islogo?logo_bg:logo_disabled}} catchtapsubmit下一步/view
/view 接着来写样式要来就来全套不是哈哈哈 /* pages/idcard/index.wxss */.idcard {text-align: center;margin: 100rpx auto;
}
.logo_disabled {/* background: #FADFCB; */background: rgba(255, 173, 118, 0.40);
}.logo_bg {background: #ffad76;
}.idcard_front, .idcard_con {height: 370rpx;width: 580rpx;
}.myCanvas {width: 600rpx;height: 450rpx;visibility: hidden;position: absolute;
}.judgeCanvas {width: 2px;height: 2px;visibility: hidden;
}.idcard_front_desc{font-size: 30rpx;color: #666666;margin-top: 20rpx;
}
.submit {height: 80rpx;width: 622rpx;line-height: 80rpx;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;margin: 50rpx auto 40rpx;/* background: #ffad76; */
} 接着就是最重要的js了我直接全选复制各位见谅封装的七牛云上传和wx.request在下面? // pages/idcard/index.js
const util require(../../utils/util.js);
const qiniuUploader require(../../utils/qiniuUploader);
import api from ../../utils/api.js;
const apiurl https://yuesao.wutongdaojia.com;
const imgPath https://cdn.wutongdaojia.com/;Page({/*** 页面的初始数据*/data: {x: 0,y: 0,areaWith: 750,areaHeight: 750,idCardUrlFront: ../../imgs/front.png,idCardUrlBack: ../../imgs/back.png,imagewidth: ,imageheight: ,base64: ,islogo:false,headerImage: ,picValue: ,showMagnifyIdCard: false,hasServerMsg: false,auth: {},// android: util.browser.versions.android},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {// helper.checkOrientation(judgeCanvas);},uploadImageFront() {var that this// front 代表正面that.checkIdCard(that, front, function(res) {wx.setStorageSync(address, res.address)wx.removeStorageSync(cardErrFront)wx.setStorage({key: idcardFront,data: {address: res.address,birthday: res.birthday,code: res.code,name: res.name,nation: res.nation,sex: res.sex,}})that.checkIsSuc()})},uploadImageBack() {var that this// back 代表反面that.checkIdCard(that, back, function(res) {wx.setStorageSync(issue, res.issue)wx.removeStorageSync(cardErrBack)wx.setStorage({key: idcardBack,data: {expiryDate: res.expiryDate, // 结束日期issue: res.issue, //签发籍贯issueDate: res.issueDate, // 开始日期}})that.checkIsSuc()})},checkIsSuc() {var that thisvar address wx.getStorageSync(address)var issue wx.getStorageSync(issue)if (address issue) {that.setData({islogo: true})}},checkIdCard(that, type, callback) {util.getUploadToken()wx.chooseImage({count: 1, // 默认9sizeType: [original, compressed], // 可以指定是原图还是压缩图默认二者都有sourceType: [album, camera], // 可以指定来源是相册还是相机默认二者都有success: function(res) {// 返回选定照片的本地文件路径列表tempFilePath可以作为img标签的src属性显示图片var tempFilePaths res.tempFilePaths;that.qiniuUploader(that, tempFilePaths[0], function(res) {console.log(res)if (type front) {that.setData({idCardUrlFront: imgPath res.key})wx.setStorageSync(idCardFrontUrl, imgPath res.key)that.uploadFile(that, type, tempFilePaths, that.data.idCardUrlFront, function(res) {console.log(res)callback(res)})} else {that.setData({idCardUrlBack: imgPath res.key})wx.setStorageSync(idCardBackUrl, imgPath res.key)that.uploadFile(that, type, tempFilePaths, that.data.idCardUrlBack, function(res) {console.log(res)callback(res)})}})// that.getIdcardInfo(front)}})},qiniuUploader(that, filePath, callback) {qiniuUploader.upload(filePath, (res) {console.log(res)callback(res)}, (error) {console.error(error: JSON.stringify(error));},null, // 可以使用上述参数或者使用 null 作为参数占位符(progress) {// console.log(上传进度, progress.progress)// console.log(已经上传的数据长度, progress.totalBytesSent)// console.log(预期需要上传的数据总长度, progress.totalBytesExpectedToSend)}, cancelTask that.setData({cancelTask}))},/*图片上传*/uploadFile(that, idCardSide, files, idCardUrl, callback) {wx.uploadFile({url: apiurl /weixin/getIdcardInfo, //里面填写你的上传图片服务器API接口的路径 filePath: files[0], //要上传文件资源的路径 String类型 name: file, //按个人情况修改文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容(后台接口规定的关于图片的请求参数)header: {Content-Type: multipart/form-data //记得设置// Content-Type: image/jpeg //记得设置},formData: {//和服务器约定的token, 一般也可以放在header中token: wx.getStorageSync(token),idCardSide: idCardSide,idCardUrl: idCardUrl},success: function(res) {//当调用uploadFile成功之后再次调用后台修改的操作这样才真正做了修改头像console.log(JSON.parse(res.data))var responce JSON.parse(JSON.parse(res.data).data)if (res.status 200) {if (responce.code 1) {callback(responce.result)} else {wx.showToast({title: responce.msg,icon: none,duration: 1000})if (idCardSide front){wx.setStorageSync(cardErrFront, responce.msg)}else{wx.setStorageSync(cardErrBack, responce.msg)}return}} else {wx.showToast({title: responce.msg,icon: none,duration: 1000})return}}})},submit() {var address wx.getStorageSync(address)var issue wx.getStorageSync(issue)var cardErrFront wx.getStorageSync(cardErrFront)var cardErrBack wx.getStorageSync(cardErrBack)if(!this.data.islogo) return// debuggerif (cardErrFront) {wx.showToast({title: 人像面cardErrFront请重新上传,icon: none,duration: 1000})return} else if (cardErrBack){wx.showToast({title: 国徽面 cardErrBack 请重新上传,icon: none,duration: 1000})return} else if (!address) {wx.showToast({title: 请上传身份证人像面,icon: none,duration: 1000})return} else if (!issue) {wx.showToast({title: 请上传身份证国徽面,icon: none,duration: 1000})return} else {wx.navigateTo({url: ../editcard/index,})}},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {wx.removeStorageSync(address)wx.removeStorageSync(issue)wx.removeStorageSync(cardErrFront)wx.removeStorageSync(cardErrBack)wx.removeStorage({key: idcardFront,success: function(res) {console.log(res)},})wx.removeStorage({key: idcardBack,success: function(res) {console.log(res)},})},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},
## 标题文字 ##/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
}) 封装wx.request来了api.js /** 使用方法*method ajax*param{参数类型}参数名 参数说明* Type请求类型get、post* params请求参数* url请求地址*/// http(dataUrl, param).then(res {
// ...
// })
const ajax (Type, params, url) {var methonType application/json;// var https http://www.wutongdaojia.comvar https https://yuesao.wutongdaojia.comvar st new Date().getTime()if (Type POST) {methonType application/x-www-form-urlencoded}return new Promise(function (resolve, reject) {wx.request({url: https url,method: Type,data: params,header: {content-type: methonType,Muses-Timestamp: st,version: v1.0 // 版本号// Muses-Signature: sign},success: function (res) {// if (res.statusCode ! 200) {// reject({ error: 服务器忙请稍后重试, code: 500 });// return;// }// resolve(res.data);wx.hideLoading()console.log(res)if (res.data.status 200) {resolve(res.data);} else if (res.data.status 400) {wx.showToast({title: res.data.message,icon: none,duration: 1000})return} else if (res.data.status 401){wx.removeStorageSync(phone)wx.removeStorageSync(token)wx.showToast({title: res.data.message,icon: none,duration: 1000,success:function(){wx.navigateTo({url: ../login/index,})}})return} else {//错误信息处理wx.showToast({title: 服务器错误请联系客服,icon: none,duration: 1000})}},fail: function (res) {// fail调用接口失败reject({ error: 网络错误, code: 0 });},complete: function (res) {// complete}})})
}module.exports {ajax: ajax
} util.js const qiniuUploader require(./qiniuUploader);
import api from ./api.js;
const getUploadToken () {var params {token: wx.getStorageSync(token)}api.ajax(GET, params, /weixin/getUploadToken).then(res {console.log(res.data)initQiniu(res.data)});
}
// 初始化七牛相关参数
const initQiniu (uptoken) {var options {region: NCN, // 华北区// uptokenURL: https://[yourserver.com]/api/uptoken,// cdn.wutongdaojia.com// uptokenURL: http://upload-z1.qiniup.com,// uptokenURL: https://yuesao.wutongdaojia.com/weixin/getUploadToken,// uptoken: xxx,uptoken: uptoken,// domain: http://[yourBucketId].bkt.clouddn.com,domain: image.bkt.clouddn.com,shouldUseQiniuFileName: false};qiniuUploader.init(options);
}export function didPressChooesImage(that, count, callback) {getUploadToken();// 微信 API 选文件wx.chooseImage({count: count,success: function(res) {console.log(res)var filePath res.tempFilePaths[0];console.log(filePath)callback(filePath)// 交给七牛上传}})
}/*** 文件上传* 服务器端上传http(s)://up.qiniup.com* 客户端上传 http(s)://upload.qiniup.com* cdn.wutongdaojia.com*/
function uploader(file, callback) {initQiniu();qiniuUploader.upload(filePath, (res) {// 每个文件上传成功后,处理相关的事情// 其中 info 是文件上传成功后服务端返回的json形式如// {// hash: Fh8xVqod2MQ1mocfI4S4KpRL6D98,// key: gogopher.jpg// }// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.htmlthat.setData({imageURL: res.imageURL,});}, (error) {console.log(error: error);},// , {// region: NCN, // 华北区// uptokenURL: https://[yourserver.com]/api/uptoken,// domain: http://[yourBucketId].bkt.clouddn.com,// shouldUseQiniuFileName: false// key: testKeyNameLSAKDKASJDHKAS// uptokenURL: myServer.com/api/uptoken// }null, // 可以使用上述参数或者使用 null 作为参数占位符(res) {console.log(上传进度, res.progress)console.log(已经上传的数据长度, res.totalBytesSent)console.log(预期需要上传的数据总长度, res.totalBytesExpectedToSend)});
};
module.exports {initQiniu: initQiniu,getUploadToken: getUploadToken,didPressChooesImage: didPressChooesImage
} 如需帮助请加微信18310911617 备注说明来意
