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

 

 

调用以后就有验证码出现了。