有一个项目需要从后台读取文件流转为图片显示到页面上，传回的文件是blob文件格式的，其实很简单，稍作记录。
http 请求如下：
image/jpeg 格式的。
后台返回如下：
-
image.png
API写法
export function getPreviewByFileId (fileId) {
return instance({
url: `后端路径?fileId=${fileId}`,
method: 'get',
responseType: 'blob'
})
}
js代码
async showAttachment(fileId){
if(!fileId) return '';
const response = await getPreviewByFileId(fileId)
let blob = new Blob([response.data]); // 返回的文件流数据
let url = window.URL.createObjectURL(blob); // 将他转化为路径
// console.log('图片url', url, response);
return url
}
// 接下来
this.mapSrc = url
到这里就拿到了blob流转换成的文件路径
image.png
html代码
然后就简单了，把这个转换出来的路劲赋值到需要展示的 img标签就可以了。
<img :src="mapSrc" alt="" style="width: 100%;">
然后每次请求返回的图片流是一样的，同一张图片，但是转换出来的路径可能是不一样的，但是只要请求的是同一张图片的话，渲染出来的图片是一样的， 所以应该保存fileId，然后每次查看的时候都会生成一个路径。
