本文作者:问几许

Ajax请求二进制流图片Img

问几许 5年前 ( 2019-03-28 ) 7257 抢沙发
Ajax请求二进制流图片Img摘要: 最近遇到一个场景,就是做一个验证码,后台返回一张验证码,而且这个请求中带有唯一的id标识,前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的...

最近遇到一个场景,就是做一个验证码,后台返回一张验证码,而且这个请求中带有唯一的id标识,前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的src属性,就可以显示出图片,但是不能获取到id,所以就利用Ajax进行get请求获取图片得二进制流,然后渲染进Img标签然后append到dom中。


原生得Ajax请求

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
    console.log(this);
    if (this.status == 200) {
        var blob = this.response;
        var img = document.createElement("img");
        img.onload = function(e) {
            window.URL.revokeObjectURL(img.src); 
        };
        img.src = window.URL.createObjectURL(blob);
        document.body.appendChild(img); 
    }
}
xmlhttp.send();

jQuery的Ajax请求

因为jQuery的Ajax没有Blob数据类型的请求,所以在Github上有一个大牛封装了jQuery数据类型扩展插件,所以我们直接就拿来用

github地址:https://github.com/tachengshimengH/jquery-ajax-blob-arraybuffer

<script src="jquery-ajax-blob-arraybuffer.js"></script>

JS代码:

$.ajax({
    type: "GET",
    headers: {
        Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8'
    },
    dataType: 'blob',
    url: "https://api.lbtc.io/genvercode",
    success: function (data, status, res) {
        var reader = new window.FileReader();
        reader.readAsDataURL(data);
        reader.onloadend = function () {
            $("#code").attr('src', reader.result);
            $("#code").attr('data-uid', res.getResponseHeader('Content-Type').split(",")[1]);
        };
    }
})

HTML:

  <img id="code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAYCAIAAACDYM+5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVFhH7dAxAQAwEAOh+rcVY7Xwt4ME3jiTFcgKZAWyAlmBrEBWICuQFcgKZAWyAlmBrEBWICuQFcgKZAWyAlmBrEDW2fYB7cJtnPXgYPQAAAAASUVORK5CYII=" alt="Verification code" >

img我引了一个灰色的占位图。

文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/51.html发布于 5年前 ( 2019-03-28 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,7257人围观)参与讨论

还没有评论,来说两句吧...