vue和js分别处理后台传过来的图片流在前端img的src中展示
参考网址:1、https://www.jianshu.com/p/1432e0f29abd 总的14.3/2、https://blackstar.coding.me/2018-08-23-arraybuffer-to-base64orblob.html3、https://blog.csdn.net/dongxingpeng/article/details/83143977此网...
参考网址:
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;”。
我的问题解决。
更多推荐
所有评论(0)