需求：后端接口返回文档流格式图片，如何在页面中显示显示并预览？
思路：
- 设置 axios responseType: ‘blob’；传送门：JavaScript Blob 对象详解
- 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的内容。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141333.html
