1. 后台返回图片

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. 后台返回二进制流

1. 前端处理：使用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样式

1. 将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);
      }
  });
},