axios获得后端的图片流以及文档流
我在一次项目中,需要获得后端的传来的验证码图片,但是我通过axios获得的图片就被损坏了
所以我找了很多文章,然后发现能有原生ajax请求来解决这种事情
代码如下
var windowUrl = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
var url = '';
xhr.open("post", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
that.url=windowUrl.createObjectURL(blob);
}
}
xhr.send({});
通过以上方法
var blob = this.response;
that.url=windowUrl.createObjectURL(blob);
这段代码的效果是 将获得图片生成一个url链接然后存在url(我自己定义的)变量里面,然后给img的src绑定这个url
同理,我在使用axios获得后端给的文件流的时候也会出现文件损坏的问题,首先我们要排除因为后缀名写错而导致的问题,其次是如果获得的文件里面是乱码,那就可以试试原生ajax
var xhr = new XMLHttpRequest();
xhr.open("post", '地址', true)
xhr.responseType = "blob";
xhr.setRequestHeader("client_type", "DESKTOP_WEB");
xhr.setRequestHeader("Authorization", sessionStorage.getItem('token'));
xhr.onload = function(){
if(this.status == 200){
var blob = this.response;
var fileName = '名单';
if(window.navigator.msSaveOrOpenBlob){
navigator.msSaveBlob(blob, fileName);
} else {
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName+'.xls';
link.click();
window.URL.revokeObjectURL(link.href);
}
}
};
xhr.send({})
以上是我解决文件流和图片流的方法
如果能用axios能解决,欢迎讨论
|