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設置以這種形式