Vue中 实现文件流格式图片预览

Posted 2021-10-29 明天也要努力

需求：后端接口返回文档流格式图片，如何在页面中显示显示并预览？

思路：

• 设置 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的内容。

相关链接：Vue中 实现文件流下载