1. 后台返回图片
- 前端处理：直接返回接口地址
<img
class="capchaImg"
:src="captchaSrc"
@click.stop="getCaptchaSrc()"
>
<span @click.stop="getCaptchaSrc()">{{ $t("换一张") }}</span>
// js
captchaSrc: '',
// 获取图片验证码
getCaptchaSrc() {
// 也可以处理图片
this.captchaSrc = `${api.captcha}?time=${Date.now()}`;
// 直接返回接口即可
// return api.captcha + '/';
},
如果需要获取验证码，同时也需要获取head信息，这样时会发送两次请求，就会有错，需要使用其他方法；如果不需要获取head信息，可以使用
// 获取图片验证码
getCaptchaSrc() {
const self = this;
// 也可以处理图片
this.captchaSrc = `${api.captcha}?time=${Date.now()}`;
// 直接返回接口即可
// return api.captcha + '/';
// 获取filename，登录传递captchaKey(后台要求，通过captchaKey标识)
axios({
type: 'HEAD',
url: api.captcha,
complete: function (xhr){
// 获取相关http response header中的filename（后台需要的字段）
const filename = xhr.getResponseHeader('filename');
self.formData.captchaKey = filename.split('.')[0];
},
});
},
2. 后台返回二进制流
- 前端处理：使用blob处理
<img
class="capchaImg"
:src="captchaSrc"
@click.stop="getCaptchaSrc()"
>
<span @click.stop="getCaptchaSrc()">{{ $t("换一张") }}</span>
// js
captchaSrc: '',
// 获取图片验证码
getCaptchaSrc() {
const self = this;
this.$request({
url: api.captcha,
method: 'get',
}).then(response => {
const data = response.data;
if (data.success) {
let info = data.data;
let blob = new Blob([info]);
self.captchaSrc = URL.createObjectURL(blob);
}
else {
self.$Message.error(data.message);
}
});
},
3. 后台返回url地址
<img
class="capchaImg"
:src="captchaSrc"
@click.stop="getCaptchaSrc()"
>
<span @click.stop="getCaptchaSrc()">{{ $t("换一张") }}</span>
// js
captchaSrc: '',
// 获取图片验证码
getCaptchaSrc() {
const self = this;
this.$request({
url: api.captcha,
method: 'get',
}).then(response => {
const data = response.data;
if (data.success) {
let info = data.data;
self.captchaSrc = info.url;
}
else {
self.$Message.error(data.message);
}
});
},
4. 返回base64样式
- 将base64转化为src
<img
class="capchaImg"
:src="captchaSrc"
@click.stop="getCaptchaSrc()"
>
<span @click.stop="getCaptchaSrc()">{{ $t("换一张") }}</span>
// 获取图片验证码
getCaptchaSrc() {
const self = this;
self.$request({
url: api.captcha,
method: 'get',
}).then(response => {
const data = response.data;
if (data.success) {
let info = data.data;
self.captchaSrc = 'data:image/png;base64,' + info.imageStr;
self.formData.captchaKey = info.filename.split('.')[0];
}
else {
self.$Message.error(data.message);
}
});
},
