vue axios请求图片流文件前端页面显示处理方法

请求回来的流有可能是乱码,如图所示:

处理方法:

第一步:发送请求时:

let url = `/frm/v1/api/images/${options.id}`;
    axios.get(url,{responseType: 'arraybuffer'}).then(function(data){
      success(data);
    }).catch(function(err){
      error(err)
    });

第二步:处理返回的数据结果

pic.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))

  在img标签中:

<img v-if="selectedLogoPicture" ref="selectlogoPictureImg" :src="selectedLogoPicture.imgUrl" class="logoImg">

  

posted @ 2018-08-28 20:49  时间脱臼  阅读(15485)  评论(2)    收藏  举报