uniapp解决图形验证码问题及arraybuffer二进制转base64格式图片

须知：浏览器端网站请求接口验证图形验证码是否正确时，会自动携带token。

所以浏览器网站没有此问题，无需从获取图形验证码的接口获取token，因为浏览器自动传的，不需手动操作。

获取图形验证码时直接将接口请求地址赋值给src即可，如下：

现在的问题是：在uniapp中包含小程序及app端的情况，请求接口时是不会自动携带token的，需要手动添加。

所以我们就需要先从获取图形验证码的接口获取token，才能在验证图形验证码时额外手动添加token。

步骤及说明：

• 先在请求图形验证码的接口拿到图形验证码信息，包括token和乱码的图形验证码图片信息。如下（data里是图片信息，COOKIEs里包含的就是token了）
  
  

  
  



• 以上方式肯定是拿不到图形验证码的图片的。我们需要经过以下处理

  
  

1、请求获取图形码接口时设置响应类型reponseType为arraybuffer
2、使用uni.arrayBufferToBase64(arrayBuffer)此api处理请求结果。此处注意base64转码后的字符串需要添加data:image/png;base64,前缀
3、请求验证接口时给COOKIE里添加token


直接上代码