vue中处理后台返回的图片流，并将图片流显示在前端（转载）

╰半橙微兮° 2022-09-16 04:52 1415阅读 0赞

转载于 [https://blog.csdn.net/qq\_41948525/article/details/105238646][https_blog.csdn.net_qq_41948525_article_details_105238646]  
**现在我接手的项目中相关的技术：vue,element-ui,axios**  
**——————接下来看看业务场景——————**

### 1.看下图（这是图片流，如果直接在img标签下的src中是没有用的）那怎么办呢，别慌往下看 ###

![https://img-blog.csdnimg.cn/20200401093717116.png][https_img-blog.csdnimg.cn_20200401093717116.png]

### 2.解决方法 ###

（1).在请求后端接口返回response  
![https://img-blog.csdnimg.cn/20200401094145112.png][https_img-blog.csdnimg.cn_20200401094145112.png]

const src = window.URL.createObjectURL(response)//这里也是关键,调用window的这个方法URL方法
    this.verifyCode = src

(2).在自己想要的地方加入  
![https://img-blog.csdnimg.cn/20200401094326770.png][https_img-blog.csdnimg.cn_20200401094326770.png]

(3).这个相信大家都懂吧（嘿嘿）  
![https://img-blog.csdnimg.cn/20200401094557413.png][https_img-blog.csdnimg.cn_20200401094557413.png]  
(4).那么最为关键的一步来了  
![https://img-blog.csdnimg.cn/20200401094705695.png][https_img-blog.csdnimg.cn_20200401094705695.png]  
**关键地，把response-type改为blob类型**

### 3.顺便说一下这个Blob ###

Blob对象

Blob也是比较有意思，mdn上的解释是Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。

\_其实就是英文Binary large Object，mysql有此类型数据结构

let blog = new Blob(arrya, options);

Blob() 构造函数返回一个新的 Blob 对象。

responseType值的类型可为如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>数据类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>’’</td> 
   <td>DOMString (这个是默认类型)</td> 
  </tr> 
  <tr> 
   <td>blob</td> 
   <td>Blob对象</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
  <tr> 
   <td>arraybuffer</td> 
   <td>ArrayBuffer对象</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td>Document对象</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>JavaScript object, parsed from a JSON string returned by the server</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>DOMString</td> 
  </tr> 
  <tr> 
   <td>–</td> 
   <td>–</td> 
  </tr> 
 </tbody> 
</table>

### 先总结到这里吧 有不足的地方请各位大佬指教 ###

[https_blog.csdn.net_qq_41948525_article_details_105238646]: https://blog.csdn.net/qq_41948525/article/details/105238646
[https_img-blog.csdnimg.cn_20200401093717116.png]: /images/20220828/b5dee973831d41d59bacd9123d66b289.png
[https_img-blog.csdnimg.cn_20200401094145112.png]: /images/20220828/a4c097ce26db46878029871920c7b74a.png
[https_img-blog.csdnimg.cn_20200401094326770.png]: /images/20220828/2be88f7f677144d1a4d23c779966cab7.png
[https_img-blog.csdnimg.cn_20200401094557413.png]: /images/20220828/b8d840e8f0b943d2888b937bd8c27096.png
[https_img-blog.csdnimg.cn_20200401094705695.png]: /images/20220828/7c0406a7d38a4b8cb13006964d7973aa.png