做登录或者注册的时候,会用到验证码,前端会接收后端发的验证码图片
就像这样的
<el-form-item label="验证码" prop="name">
<el-input style="width: 147px;" v-model="ruleForm.verification" placeholder="请填写验证码"></el-input>
<div class="verification">
<img :src="this.verificationImg" alt="" @click="acquireVerification">
</div>
</el-form-item>
我这是使用了 element-ui ,普通的输入框也是可以的
data () {
return {
verificationImg: '',
ruleForm: {
verification: ''
}
},
acquireVerification () {
// {responseType: 'blob'} ,不加这个返回的就是乱码
axios.get('/api/verifyCode', {responseType: 'blob'}).then((response) => {
console.log(response.data)
this.verificationImg = window.URL.createObjectURL(response.data)
console.log(this.verificationImg)
})
}
mounted () {
this.acquireVerification()
}
.verification {
position: absolute;
right: 0px;
top: 0px;
}
关注公众号:大明贵妇,无套路获取前端学习资料,期待各位客官来临