登录页面后台返回验证码图片

记录一下

后台请求地址. 需要注意的是.需要在后面补上设置
设置请求数据类型 responseType: ‘arraybuffer’

接口如下:

export const getCode = randomStr => {
  return request({ url: `/xxxx/code/${randomStr},responseType: 'arraybuffer' })
}

html:

<el-form-item prop="code">
   <el-input v-model="formLogin.code" type="text" placeholder="验证码">
     <template slot="append">
       <img class="login-code" :src="codeImg" @click="getCode" />
     </template>
   </el-input>
</el-form-item>

js

async getCode() {
  this.randomStr = new Date().getTime()
  let res = await this.$api.user.getCode(this.randomStr)
  this.codeImg = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
}

重点是这段代码:
this.codeImg = ‘data:image/png;base64,’ + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ‘’))