1、php服务器生成图片验证码的代码片段如下:
注意红框部分的代码,生成的是ArrayBuffer类型的二进制图片
2、显示验证码
显示验证码,不要直接image组件加上src显示,那样拿不到cookie,没有办法做图形验证码的验证,需要通过接口的方法获取,上接口代码如下:
function get_verify_code(url, success, fail, complete) {
if (request_status == true) {
return;
}
request_status = true;
let header = {
'Content-Type': 'application/x-www-form-urlencoded'
};
uni.request({
url: url,
timeout: 60000,
header: header,
responseType: 'arraybuffer',//这个地方不要写错
method: 'GET',
success: res => {
request_status = false;
if (res.statusCode == 200) {
let cookieKey = '';
let data = res.data;//拿的图片
// #ifdef MP-WEIXIN
if (res && res.header && res.header['Set-Cookie']) {
cookieKey = res.header['Set-Cookie'];//拿cookie
}
// #endif
success({"data":data,"cookieKey":cookieKey});
} else if (res.statusCode == 404) {
success({"success": false,"field": "fail_net","message": "请求的资源不存在"});
} else if (res.statusCode == 500) {
success({"success": false,"field": "fail_net","message": "内部服务器错误"});
} else {
success({"success": false,"field": "fail_net","message": "请求异常"});
}
},
fail: (e) => {
if (request_status == true) {
request_status = false;
}
fail(e);
},
complete: (e) => {
if (request_status == true) {
request_status = false;
}
complete(e);
}
});
}
显示图片的操作代码如下:
get_verify_code(v) {
let url = `${base_url}get_verify_code/${v}`;
//console.log('url:'+url);
this.$net.get_verify_code(
url,
res => {
const base64 = uni.arrayBufferToBase64(res.data);
this.imageData = `data:image/png;base64,${base64}`;
// #ifdef MP-WEIXIN
if (res.cookieKey) {
uni.setStorageSync('cookieKey', res.cookieKey);
}
// #endif
},
() => {
},
() => {
}
);
},
这样图片就可以正常显示了,提交的方法里要带上cookie,这样就可以验证验证码了。