前端文件流的一些简单处理(前端下载文件的方式)(接口正常,图片显示不出来?)

最新推荐文章于 2024-07-10 15:21:08 发布

BYE＆

最新推荐文章于 2024-07-10 15:21:08 发布

阅读量1.5k

点赞数 1

分类专栏：总结文章标签： javascript ajax

本文链接：https://blog.csdn.net/qq_44786519/article/details/108588353

版权

这篇博客探讨了前端如何处理文件流，特别是下载文件的问题。由于XMLHttpRequest 1版本不支持文件流，通常会导致文件显示为乱码。然而，XMLHttpRequest 2和H5的Blob对象解决了这个问题。通过设置axios的responseType为'blob'，可以正确接收并处理二进制文件。在前后端分离的架构中，后端提供下载接口，前端通过GET或POST请求，以blob格式接收数据，实现文件下载。

摘要由CSDN通过智能技术生成

图片上的显示问题比较少,大部分都是直接antd组件,人家处理好了,所以不用担心.
主要是下载文件怎么处理

先说图片的显示问题吧.文件流都是二进制.相信大多数人和我一样笨笨的,旧直接 ajax 或者 axios 请求了.但是发现请求一切正常,但是就是没有文件被下载下来.
文件传输都是二进制,原始的xmlhttprequest 1版本,ajax不支持文件流,jquery也一样.所以默认处理二进制就直接文本乱码显示了,也不会当作附件下载下来.
当然xmlhttprequest 2 标准中支持文件流.并且用xhr.response作为返回,而不是responseText.但是二进制接收到了怎么处理二进制的文件呢?
H5中有一个新特性有一个blob对象处理.当然 axios 也支持responseType:blob属性(axios还是很强的).
所以原生ajax写的话


            var url = serverUrlBase + "/server/images/" + mapid + "/files/png";
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = "blob";
            xhr.setRequestHeader("client_type", "DESKTOP_WEB");
            xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);
            xhr.onload = function() {
                if (this.status == 200) {
                    var blob =