需求：后端接口返回文档流格式图片，如何在页面中显示显示并预览？
思路：
URL.createObjectURL() 创建一个 DOMString，包含一个表示参数中给出的对象的 URL；
通过 Element-ui 中的图片组件（Image）实现预览；
完整代码：
<template> <div class="home"> <el-image style="width: 200px; height: 200px" :src="imgUrl" :preview-src-list="srcList"> </el-image> </div> </template> <script> import axios from 'axios'; export default { data(){ return{ imgUrl:'', srcList: [] } }, methods:{ loadFile() { axios({ method: 'get', url: '/api/file/download/123456', responseType: 'blob', params: {}, headers: { Accept: 'application/octet-stream', token: myToken, // 获取token，这里假定 myToken }, }).then(res => { let blob = new Blob([res.data], {type: 'image/jpeg'}); const imageUrl = URL.createObjectURL(blob); this.imgUrl = imageUrl; this.srcList.push(imageUrl); }).catch(err => { console.log('导出失败') }) }, }, mounted(){ this.loadFile(); } } </script>
拓展：
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。
这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
Note: 此特性在 Web Worker 中可用；
注意： 此特性在 Service Worker 中不可用，因为它有可能导致内存泄漏；
语法：objectURL = URL.createObjectURL(object); 参数：object 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象； 返回值：一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
