前端处理后台返回流类型的图片/PDF

1. 项目背景

在开发过程中，有些情况下后台没有办法给我们直接提供图片或者Pdf的路径供我们前端开发使用，而是返回的文件流。这种情况下我们就不得不自己动手丰衣足食了。

---

2. 接口定义

我们使用前端常用的 axios.js 插件来请求后台给我们提供的返回二进制流的接口，代码如下:

  const getBlobData = (data, options) =>{
  return axios.request({
    url: `/url/***`,
    responseType: 'blob',
    data: data,
    method: 'post'
  }).then(res=>{
     let blob = new Blob([res],options)
     let url =window.URL.createObjectURL(blob)
     return url
  })
}

3. 数据处理

当我们使用axios发起请求的时候，需要设置响应类型 responseType: 'blob',发起请求之后，我们会得到后台返回的流数据，如图所示：

接收到流数据，根据返回的数据流创建一个Blob类的实例，构造函数的第一参数是流数组，第一个参数可以传一个对象，用来定义文件的类型,当流文件是图片时，第二哥参数可以不传，当流文件是pdf时，需要定义为 {type: 'application/pdf'}，否则浏览器无法识别文件类型，时不能在浏览器预览的。

得到Blob的实例之后，通过window.URL.createObjectURL() 方法创建一个可以访问的url。至此我们就可以对得到的url进行操作。可赋值给 img 标签的 src 属性，或者通过window.open() 来进行预览。

ok 打完收工！