<el-form-item label="图片验证码" label-width="25%">
<el-col :span="15">
<el-form-item prop="photoIdentityCode">
<el-input type="text" v-model="loginForm.photoIdentityCode" placeholder="单击图片刷新"
style="width: 100%;" @keyup.enter.native="login" clearable>
</el-input>
</el-form-item>
</el-col>
<el-col class="line" :span="1"> </el-col>
<el-col :span="8">
<el-form-item>
<img class="captcha-img pointer" :src="loginForm.src" @click="refreshCaptcha" clearable>
</el-form-item>
</el-col>
</el-form-item>
所有请求采用axios进行封装；
//获取图片校验码
refreshCaptcha: function(){
this.loginForm.timeStamp=new Date().getTime();
let params={
"data":{
"timeStamp":this.loginForm.timeStamp
}
}
this.$api.LoginManage.getPhotoValidCode(params).then((res)=>{
let img = btoa(
new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
);
this.loginForm.src= 'data:image/png;base64,' +img;
})
},
后端返回为图片流，所以要加 responseType: "arraybuffer" 这句代码；
// 获取图片验证码
export const getPhotoValidCode = (params) => {
return axios({
url: 'loginInfo/getPhotoValidCode',
responseType: "arraybuffer",
method: 'post',
params
})
}
