uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)

  • 场景:针对于图片验证码,切换图片验证码发送请求,后端返回x00\x10JFIF\x00\x01\x02\x00形式的图片数据,我们需要拿到数据进行处理后回显,(以及对我们输入的验证码进行校验:这里我会重新发个文章进行说明)

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_第1张图片

  •  数据结构分析:

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_第2张图片

这里我用的是promise进行封装的,最终返回了4个字段:

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_第3张图片

  • 解决方式

通过该请求返回的数据我们肯定是回显不了图片的,data不是我们需要的图片路径或者base64格式,需要处理:

1、请求获取图形码接口时设置响应类型reponseType为arraybuffer

2、使用uni.arrayBufferToBase64(arrayBuffer)此api处理请求结果(需要注意的是:base64转码后的字符串需要添加data:image/png;base64前缀)

  • 代码如下

-- 接口代码请求封装:

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_第4张图片

-- 请求接口: 

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_第5张图片

 返回的格式查看:

uniapp:解决图形验证码问题及利用arraybuffer二进制转base64格式图片(后端传的图片数据形式:x00\x10JFIF\x00\x01\x02\x00…)_第6张图片

你可能感兴趣的:(uni-app)