前端把图片文件流转为base64格式展示在前端，显示图片
1、需求：前台需要展示图片，期望后台直接返回图片地址，但是后台给的是的文件流而不是一个图片地址，需要把文件流转为base64的格式展示出来
2、在获取图片接口中需要添加responseType:"arraybuffer"
添加responseType之后获取的数据如下图
3、在需要的展示图片的位置添加一个img标签
4、对src绑定的fileField变量进行赋值处理
5、最终展示在前端页面的图片如下图所示
6、所需代码
// 图片接口
export const getPicList = (params) => {
return request({
url: Vue.prototype.BASE_URL + '/examiner/showpic',
method: 'get',
params: { ...params },
responseType: 'arraybuffer'
})
}
//img标签
let picParam = {
filename: decodeURIComponent(row.bioinformaticsFilePath),
};
getPicList(picParam).then((res) => {
var data = res.data;
this.fileField =
"data:image/png;base64," +
btoa(
new Uint8Array(data).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
});