js图片转二进制流_为了安全问题后台返回前端得文件为二进制得流，我们该如何处理这些流文件...

1遇到问题得场景：本来后台返给前端得图片，音频，视频等文件前端直接就能访问到！可是为了安全前端要在次请求这个路径而且还要加进去一个请求头。请求成功后后台返回你二进制得流！然后前端在解析这个二进制得流才能访问得文件！

当时遇到了困惑用了两天时间才搞出来！说下我之前遇到得坑！这些坑就不代码演示了刚开始想法是用封装好得axios get方法去请求这个文件得路径加进去请求头 以及流得类型，这个时候请求是可以得到这个流得！但是当你用window.URL.createObjectURL()方法解析这个流是确保错window.URL.createObjectURL()方法不错在！当时就傻脸拉！百度很多解决得党法没有用 ！就觉得是axios 会强转一下string类型所以导致报错！解决方法用了原生得xhr!

上代码！

getImg 

希望大家遇到二进制流的时候做个参考 ！也希望有大佬多多指点

2 流文件下载 我下载的是pdf文件其他文件没尝试,直接上代码！这个用的是Axios

downloadHandle = async (record: any) => {
    //  https://im-obs-aksk.obs.cn-south-1.myhuaweicloud.com/u/0/0/201912/3e681acfe4874417bc2bdc81d360cbed.zip
    let baseZip = await Axios.get(
     // 下载路径                                      流类型 
      `/open/im-file-info?fileUrl=${record.doc}`, { responseType: "blob" })
       // 下两步操作只是为了取文件名
    var index=record.doc.lastIndexOf("/");
    var fileName=record.doc.substring(index + 1, record.doc.length)
  // 下面函数 对请求到的结果进行处理 第一个参数文件名 第二个参数请求到的数据
    this.exportRaw(fileName, baseZip.data)
  }
// 处理函数
exportRaw = (name: any, data: any) => {
    var urlObject = window.URL || window.webkitURL || window;

    var export_blob = new Blob([data]);
    var save_link: any = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    // 对得到的东西再次处理
    this.fakeClick(save_link);
  }
// 再次处理
fakeClick = (obj: any) => {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    obj.dispatchEvent(ev);
  }

就上面这样浏览器就自动下载了！遇到可以尝试下 项目中用了ts这是直接拿项目中的代码！这次分享就到这里希望大家能用到