vue和js分别处理后台传过来的图片流在前端img的src中展示

参考网址：

1、https://www.jianshu.com/p/1432e0f29abd  总的14.3/

2、https://blackstar.coding.me/2018-08-23-arraybuffer-to-base64orblob.html

 

3、https://blog.csdn.net/dongxingpeng/article/details/83143977 此网站下的数据交互基于axios

 

次博客的栗子基于superagent

一开始我接受打印出来的text是乱码

原因是在数据请求的时候返回的respon是json的形式，而后台返回的流(我理解的就是二进制的图片)。这样的话我们在请求接口的时候就要定义一下   .responseType：arraybuffer

(一：vue)

html:

<span class="code-img" @click="refreshCode">
     <img class="code-img-box" :src="codeImg" alt="">
</span>

script:

var request = require('superagent');

data(){
            return{
                codeImg:'', 
            }
        },
menthods:{
refreshCode(){
  // console.info('刷新获取验证码');
    request 
        .post('/api/pet........')
        .send()
        .responseType('arraybuffer')
        .then((res)=>{ 
const bufferUrl = btoa(new Uint8Array(res.body).reduce((body, byte) => body + String.fromCharCode(byte), ''));
             this.codeImg = 'data:image/png;base64,' + bufferUrl
         })
         .catch((err)=>{
              console.log(err)
         })

}
}
 

二、js写法

//刷新获取图片验证码
function getImgCode() {
var imgUrl = event.target.src;
   // console.log(event.target.src);
   var imgUrl = event.target.src;
   var xmlhttp;
   if (window.XMLHttpRequest) {
       //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
       xmlhttp = new XMLHttpRequest();
    } else {
     // IE6, IE5 浏览器执行代码
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    // 请求成功回调函数
    xmlhttp.onload = e => {
      // console.log('request success');
    };
   // 请求结束
   xmlhttp.onloadend = e => {
      // console.log('request loadend');
   };
   // 请求出错
  xmlhttp.onerror = e => {
      // console.log('request error');
  };
   // 请求超时
  xmlhttp.ontimeout = e => {
     // console.log('request timeout');
  };
 
  xmlhttp.timeout = 0; // 设置超时时间,0表示永不超时
  // 初始化请求
  // http://rap.qdum.com/mockjsdata/43/submitForm/?id
 xmlhttp.open('POST', 'http://19............', true);
 // 设置期望的返回数据类型 'arraybuffer'
 xmlhttp.responseType = 'arraybuffer';
 // 设置请求头
 // xmlhttp.setRequestHeader('', '');
 // 发送请求
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       // console.log(xmlhttp)
      console.info(xmlhttp.response);
   var bufferUrl = btoa(new Uint8Array(xmlhttp.response).reduce((response, byte) => 
response + String.fromCharCode(byte), ''));
    console.log('data:image/png;base64,' + bufferUrl)
//event.target.src = 'data:image/png;base64,' + bufferUrl;
//event.target.src 的指向不对  所以img的src付不上值，更换成imnUrl,imgUrl在函数前面赋值
    imgUrl = 'data:image/png;base64,' + bufferUrl;
    console.log(event.target.src)
}
}
}

这里要注意  在页面中赋值img的src仍然是unkonw

因为在这里 event.target的指向是不对的 没有穿透 所以要加两句代码 

1、再函数前面定义 var imgUrl =  event.target.src 

2、“event.target.src = 'data:image/png;base64,' + bufferUrl;”改成“imgUrl = 'data:image/png;base64,' + bufferUrl;”。

我的问题解决。