前端处理后端的文件流和图片流

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){			// IE浏览器下
                        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能解决，欢迎讨论