Vue拿到二进制流图片转为正常图片并显示,使用场景 如 登录验证码前后台的交互

前端

axios({
        method: 'get',
        url,
        responseType: 'arraybuffer' // 最为关键
      })
        .then(function (response) {
          that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data)
        })

arrayBufferToBase64 (buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },

 <img :src="src" alt="验证码">

后台代码

@ApiOperation(value = "用户登录获取图形验证码")
@GetMapping("getyzm")
public void captcha(String token, HttpServletResponse response, HttpServletRequest request) throws ServletException, IOException {
    response.setHeader("Cache-Control", "no-store, no-cache");
    response.setContentType("image/jpeg");

    if(StringUtils.isEmpty(token)){
        System.out.println("token为空");
    }
    // 生成文字验证码
    String text = producer.createText();

    // 生成图片验证码
    BufferedImage image = producer.createImage(text);
    // 保存到验证码到 session
    //   request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, text);
    redisUtil.set(token,text,300);
    ServletOutputStream out = response.getOutputStream();
    ImageIO.write(image, "jpg", out);
    IOUtils.closeQuietly(out);
}