前端接收后端返回的二进制流并转换成图片验证码

一、接收数据

1）如果后端的接口是get方法，可以直接使用img标签

<img id="canvas_img" src="http://localhost:9999/api/image_verifty" alt="">

2）使用axios
html

<img id="canvas_img" src="" alt="">

js

axios({
   url:'/api/image_verifty',
   method:'get',  //默认get方法，可以不写
   responseType:'arraybuffer'  //或者是blob
}).then(res=>{
   let canvas_img = document.querySelector('#canvas_img');
   let imageType = res.headers['content-type'];   //获取图片类型
   const blob = new Blob([res.data], { type: imageType })
   const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
   canvas_img.src = imageUrl;
   canvas_img.onload = function(e) {
       window.URL.revokeObjectURL(canvas_img.src);  //释放URL.createObjectURL()创建的对象
   };
})

3）使用ajax
html

<img id="canvas_img" src="" alt="">

js

let xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {
  // 兼容 IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/api/image_verifty",true);
xmlhttp.responseType = 'arraybuffer'; //或者是blob
xmlhttp.onload = function(){
    //请求成功
    if (this.status == 200) {
      let canvas_img = document.querySelector('#canvas_img');
      let imageType = xmlhttp.getResponseHeader("Content-Type");
      const blob = new Blob([this.response], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      canvas_img.src = imageUrl;
      canvas_img.onload = function(e) {
          window.URL.revokeObjectURL(canvas_img.src);  //释放URL.createObjectURL()创建的对象
      };
    }
}
xmlhttp.send();

二、报错处理

当返回JSON格式的报错信息时，responseType已经将返回的数据转成了二进制，我们需要将二进制转化成JSON数据才能获取错误提示。

1）responseType为blob

axios({
   url:'/api/image_verifty',
   responseType:'blob'   
}).then(res=>{
   const reader  = new FileReader();  //创建一个FileReader实例
   reader.readAsText(res.data, 'utf-8'); //读取文件,结果用字符串形式表示
   reader.onload=()=>{//读取完成后,**获取reader.result**
       try{
           const msg = JSON.parse(reader.result);  //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
           console.log(msg)   //msg为转换后的JSON数据
       }catch{
           let imageType = res.headers['content-type'];
           let canvas_img = document.querySelector('#canvas_img');
           const blob = new Blob([res.data], { type: imageType })
           const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
           canvas_img.src = imageUrl;
           canvas_img.onload = function(e) {
               window.URL.revokeObjectURL(canvas_img.src);  
           };
       }
   }
})

2）responseType为arraybuffer

axios({
    url:'/api/image_verifty',
    responseType:'arraybuffer'  
}).then(res=>{
   try{
       const utf8decoder = new TextDecoder()
       const u8arr = new Uint8Array(res.data)
       const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
       const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
       console.log(msg)   //msg为转换后的JSON数据
   }catch{
       let imageType = res.headers['content-type'];
       let canvas_img = document.querySelector('#canvas_img');
       const blob = new Blob([res.data], { type: imageType })
       const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
       canvas_img.src = imageUrl;
       canvas_img.onload = function(e) {
           window.URL.revokeObjectURL(canvas_img.src);
       };
   }
})

三、补充（文件下载）

以上的方法也适用于下载各类文件
接口的响应头信息如下：

axios({
    url:'/export',
    method:'get',
    responseType:'blob'
}).then(res=>{
    const { data, headers } = res;
    /*获取文件名,这里的正则表达式要根据响应头"content-disposition"信息来变化，含义是将headers['content-disposition']的内容替换成第一个括号里的内容(即文件名)并返回。
    	如果响应头：
    		content-disposition:attachment; filename="测试文件名.xls"
    	
    	注意分号与filename间多了空格，filename后还有个双引号
    	所以：
    		const fileName = headers['content-disposition'].replace(/\w+; filename="(.*)"/, '$1') 
    	
    */
    const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') 
    //获取文件流及文件类型
    const blob = new Blob([data], { type: headers['content-type'] })
    let a = document.createElement('a')
    let url = window.URL.createObjectURL(blob)
    a.href = url
    a.download = decodeURI(fileName)
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    a.parentNode.removeChild(a)
    window.URL.revokeObjectURL(url)
})

参考：JavaScript如何转换二进制数据显示成图片
参考：如何将blob返回值转换为json格式
参考：js 二进制流文件下载（接口返回二进制流）乱码处理
参考：前端使用axios实现下载文件功能的详细过程