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

<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>
复制代码

语法：objectURL = URL.createObjectURL(object);
参数：object  用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象；
返回值：一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。