前端
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); }