前端显示以文件流方式返回的图片

后端返回：

前端处理：

一、以base64的方法输出

1.封装一个文件流转base64的方法

const imageConvert = (blobFile) => {
        return new Promise((resolve, reject) => {
          const fr = new FileReader();
          fr.onload = (e) => {
            resolve(e.target.result);
          };
          fr.onerror = (err) => reject(err);
          fr.readAsDataURL(blobFile);
        });
 };

2.在请求中使用

async function getImage() {
        const res = await axios({
          method: 'get',
          url: '/api/person/image',
          responseType: 'blob',//注意要设置这一点
        });
        const imageSrc = await imageConvert(res.data);//res.data就是后端返回的文件流
        image.src = imageSrc;//将base64赋值给图片src属性
}

二、以url形式展示

只改一下调用的方法就可以了。

const imageConvert = (blobFile) => {
        return URL.createObjectURL(blobFile);//返回一个url。这种形式blob:http://xxxxxxxxxxx
};

注意使用 URL.createObjectURL生成的url使用完后需要调用

URL.revokeObjectURL(objectURL)

来释放对文件的引用。

三、总结 

两个方法都需要注意要在axios请求中设置 responseType: 'blob'，以便正确的调用图片转换的方法。

更多参考学习：

JS Blob与ArrayBuffer：深入解析二者关系及应用场景_js解析arraybuffer-CSDN博客

Axios的几种不同的responseType处理响应，以及blob与arraybuffer的解析_axios responsetype-CSDN博客

【文件上传】blob、file、formdata区别_sream buffer file blob formdata-CSDN博客

前端实现下载的触发机制，一篇文章搞定下载（文件下载，图片下载，截屏下载）_文件下载是如何触发的-CSDN博客