- 写在前面：
- 实现的逻辑是拍照上传调用后端封装好的身份证接口，然后同时调用七牛云接口把照片传过去以便后台管理系统审核看
- 1:首选需要这么一张页面
首先是布局（以下是wxml）
扫描身份证人像面
扫描身份证国徽面
下一步
接着来写样式，要来就来全套不是，哈哈哈
/* 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 = this
var 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, // 默认9
sizeType: ['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
// debugger
if (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.com"
var https = "https://yuesao.wutongdaojia.com"
var 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.html
that.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）
备注：说明来意
- 闲暇之余写了个小程序：不二颜究所，欢迎搜索～
