Vue 獲取后端傳來的base64驗證碼

vue獲取后端接口傳入的base64驗證碼

<img :src="codeUrl" @click="getCode()" style="width:130px;height:40px; float:left;margin-left:25px" />
        <a-input v-model="code" style="width:260px;" class="input"   v-decorator="[
          
          { rules: [{ required: true, message: '請輸入驗證碼' }] },
        ]" placeholder="請輸入驗證碼"></a-input>

一個展示驗證碼的img img帶有點擊更換驗證碼的功能  后帶一個輸入驗證碼的輸入框

 

getCode方法

 getCode(){
            captchaImage({}).then(res => {
            console.log(res.data.uuid)
            this.codeUrl = "data:image/gif;base64," + res.data.img;
            this.uuid=res.data.uuid
            })

 

 

 

其中codeUrl是后端傳來的base64驗證碼編碼解碼后的結果

 

captchaImage({})就是后端傳過來的接口了！

接口返回的res

 

 

調用以后就有驗證碼出現了。