后端返回的文件流,前端怎么把图片显示出来呢?

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点,刚好准时下班

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐