前端将后端返回的文件流显示为图片
后端返回的文件流,前端怎么显示出来呢?1.多年前端开发经验的我目前用的最多的是:直接将请求地址写在src里面,如:<img src="/file/preview/picture.png" alt="图片">或者:<img src="/file/preview/picture2.png?token=eyJqdGkiOiIxIiwiaXNzIjoibHZqdW4iLCJpYXQiOj
·
后端返回的文件流,前端怎么把图片显示出来呢?
1.多年前端开发经验的我目前用的最多的是:直接将请求地址写在src
里面,如:
<img src="/file/preview/picture.png" alt="图片">
或者:
<img src="/file/preview/picture2.png?token=eyJqdGkiOiIxIiwiaXNzIjoibHZqdW4iLCJpYXQiOjE2MjU3MDcxODAsInN alt="图片">"
这样即直接又简单。
2.但是由于后台加上鉴权后,需要每个接口在header里面加上token,上面的做法就行不通了,只有老老实实的写http请求了
然后问题就来了,普通请求方式下,后端返回的文件流是一堆乱码,如:
甚是苦恼,后来我找到了一个方法完美的解决了这个问题
解决方法:
1.首先再http请求里,加上responseType: 'blob'
,如:
然后:将返回的blob类型的图片转成base64
let blob = res.data;
let reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64
reader.onload = function () {
_this.url= reader.result
}
然后就到了晚上10点,刚好准时下班
更多推荐
已为社区贡献1条内容
所有评论(0)