前端将后端传的文件流转成图片(base64)的url地址,展示在页面上

437 阅读1分钟

后端接口返回文件流,前端如何将其转为图片,展示在页面上? Vue2实现

image.png

getFlowChart(record){
   getAction(‘这里是获取文件流的接口’,{responseType: 'blob'})
   .then((res)=>{
     if(res){
       //res.result为文件流
       //filename 就是转化之后的文件路径,可以直接使用
       this.filename = 'data:image/png;base64,'+ res.result;
     }
   })
 }
getAction(url,parameter) {
   return axios({
       url: url,
       method: 'get',
       params: parameter,
       headers: signHeader
   })
 }
 <div class="chart" v-if="text == '申请单'">
    <img :src="filename" alt="">
 </div>