前端把图片文件流转为base64格式展示在前端，显示图片

最新推荐文章于 2024-09-09 11:43:41 发布

一只生菜

最新推荐文章于 2024-09-09 11:43:41 发布

阅读量4.7k

点赞数 2

文章标签： javascript vue

原文链接： https://www.cnblogs.com/m1754171640/p/14187567.html

版权

本文介绍了如何在前端开发中，当后台返回文件流而非图片URL时，如何将文件流转换为Base64格式，以便于在img标签中正确显示图片。关键步骤包括设置responseType、处理arraybuffer数据并使用btoa编码。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

需求：前台需要展示图片，期望后台直接返回图片地址，但是后台给的是的文件流而不是一个图片地址，需要把文件流转为base64的格式展示出来

需求：前台需要展示图片，期望后台直接返回图片地址，但是后台给的是的文件流而不是一个图片地址，需要把文件流转为base64的格式展示出来

2、在获取图片接口中需要添加responseType:“arraybuffer”

3.添加responseType之后获取的数据如下图

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标签
  <img class="imgWH" :src="fileField" alt />
 
  
  //请求图片接口并且对文件流进行处理
 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),
              ""
            )
          );
      });