标签：uniapp arraybuffer base64 验证码 接口 token 图形 data

须知：浏览器端网站请求接口验证图形验证码是否正确时，会自动携带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,  //验证码输入是否正确
            },
            onl oad(){
                  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
                                  this.verifyCodeToken=res.cookies[0]
                            },
                            fail: () => {},
                      });
                },
                //检查图形验证码对错
                checkVerifyCode(){
                      if(this.verifyCode.length>=4){
                            let headers={
                                  Cookie: 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>

标签：uniapp,arraybuffer,base64,验证码,接口,token,图形,data
来源： https://www.cnblogs.com/huihuihero/p/13183031.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。