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

直接上代码

<script>
      export default{
            data(){
                  verifyCodeImg:'',   //验证码图片
                  verifyCodeToken:'',   //图形验证码的验证token
                  isVerifyCodeTure:false,  //验证码输入是否正确
            },
            onLoad(){
                  this.getVerifyCodeImg()                  
            },
            methods:{
                //获取图形验证码及其验证token
                getVerifyCodeImg(){
                      uni.request({
                            url: `${this.$baseUrl}/api-user/getVerification?t=${Math.random()}`,
                            method: 'GET',
                            responseType: 'arraybuffer',  //设置响应类型
                            success: res => {
                                  //将 ArrayBuffer 对象转成 Base64 字符串
                                  const arrayBuffer = new Uint8Array(res.data)
                                  const base64 = "data:image/png;base64,"+uni.arrayBufferToBase64(arrayBuffer)  //这里需要添加前缀
                                  this.verifyCodeImg=base64
                                  //需要注意的是，微信小程序与app端的数据返回格式是略有不同的的，所以请以一下这种方式获取token，而不要用this.verifyCodeToken=res.cookies[0]（具体格式见下图）
                                  this.verifyCodeToken=res.header["Set-Cookie"]
                                  
                            },
                            fail: () => {},
                      });
                },
                //检查图形验证码对错
                checkVerifyCode(){
                      if(this.verifyCode.length>=4){
                            let headers={
                                  "Token": this.verifyCodeToken  //将token信息添加至请求头里
                            }
                            uni.request({
                                  url: `${this.$baseUrl}/api-user/checkVerification?code=${this.verifyCode}`,
                                  method: 'GET',
                                  header: headers,
                                  success: res => {
                                        if(res.data.code==200){
                                              this.isVerifyCodeTure=true
                                        }else{
                                              this.isVerifyCodeTure=false
                                              this.verifyCode=''
                                              this.getVerifyCodeImg()
                                              uni.showToast({title: '图形验证码输入错误',icon:'none'});
                                        }
                                  },
                                  fail: () => {},
                            });
                      }else{
                            this.isVerifyCodeTure=false
                      }
                },
          }     
    }
</script>

微信小程序端图形验证码的数据返回格式

app端图形验证码的数据返回格式

请求头中cookie设置以这种形式