ajax 请求二进制流图片文件 XMLHttpRequest 请求并处理二进制流数据之最佳实践

最新推荐文章于 2024-04-04 19:39:41 发布

原创

最新推荐文章于 2024-04-04 19:39:41 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

本文详细记录了解决前后端完全解耦框架下，使用Ajax请求和处理图片二进制流数据的过程。从最初的错误尝试，到发现jQuery AJAX不支持二进制流，再到利用XMLHttpRequest 2的Blob对象成功处理二进制数据并显示在img标签中。最终实现了高效地加载和显示二进制流图片，为前后端分离提供了实践方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面：从提出需求到完美的解决问题，实现过程是曲折的。

需求：在前（web client）后（Restful Service）端完全解耦的模式框架下，webclient需要请求 Service 返回的图片文件（二进制流），并在client端显示。

第一步思考：拿到此需求，基于程序员的狂妄心里，思考到显示图片而已，jquery ajax直接get请求将返回data 赋值给img标签的src属性即可嘛，so easy~

不知天高地后的小子开始码代码，经过几分钟给出了以下的代码，并自信满满的准备测试。

            //$.ajax({
            //    method: "GET",
            //    url: serverUrlBase + "/server/images/" + mapid + "/files/png",//跨域，请求会返回流文件 png图片
            //    beforeSend: function (xhr) {
            //        xhr.setRequestHeader("client_type", "DESKTOP_WEB");
            //        xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);
            //    },
            //    success: function (data) {
            //        //$("#remoteimg").attr("url", data);
            //    }
            //});

在visual studio 中选中文件在浏览器中查看。