记录个人学习使用
页面样式:
接口返回数据:
此处的base64不需要转,可直接赋值使用,详情如methods内的方法显示
html部分:
<el-form-item label="" prop="checkCode"><el-input v-model="formLogin.checkCode" prefix-icon="lj-icon-yanzhengma"autocomplete="off"autocapitalize="off"spellcheck="false"@keyup.enter.native="submit"style="float:left;width:240px;" placeholder="请填写验证码"></el-input><div style="width:110px;float:right;height:40px;"><img :src="this.img" alt="" @click="acquireVerification"></div></el-form-item>
data-return内容
img:'',formLogin: {username: "",password: "",code: "",checkCode:"",uuid:""},
methods内容
// 登录验证码acquireVerification () {req.post("/accountLogin/sendCaptcha",{responseType: 'blob'}).then((res) => {console.log("res",res)// this.img = window.URL.createObjectURL(res.t)this.img =res.t.img;this.formLogin.uuid = res.t.uuid;});}
如果觉得《vue 通过接口实现前端登录页验证码功能》对你有帮助,请点赞、收藏,并留下你的观点哦!