vue项目,把图片文件流转为base64格式以图片形式展示在前端

问题描述

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

请求后台接口时,返回图片内容如下:
vue项目,把图片文件流转为base64格式以图片形式展示在前端
上图不是base64格式,二十二进制的文件流数据,前端要想展示,只需要转换数据格式为base64即可。

解决方法

  1. 在获取图片接口中需要添加responseType:"arraybuffer"
  getVerifyCode({
    tel = '',
  }) { // 获取图形验证码
    return request({
      url: 'test/xxx/xxx',
      method: 'post',
      data: Object.assign({
        username: tel
      }, commonquery()),
      responseType: 'arraybuffer'
    })
  }, 

设置了 responseType: 'arraybuffer’后的接口返回:
vue项目,把图片文件流转为base64格式以图片形式展示在前端

  1. 在需要的展示图片的位置添加一个img标签
 <img
            :src="verifyImg"
            @click="getVerify"
            style="height:41px;max-width:40%;"
          />
  1. base64转换显示
    对src绑定的verifyImg变量进行赋值处理
 getVerify() {
      if (!this.regTel.test(this.tel)) {
        this.$toast.fail("输入正确的手机号格式!");
        return false;
      }
      this.verifyDialogShow = true;
      this.verifyCode = "";
      inviteApi["getVerifyCode"]({
        tel: this.tel
      })
        .then(res => {
          const src =
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
          this.verifyImg = src;
        })
        .catch(error => {
          console.log(error);
        });
    },
  1. 最终展示在前端页面的图片如下图所示
    vue项目,把图片文件流转为base64格式以图片形式展示在前端
    参考:前端把图片文件流转为base64格式展示在前端,显示图片
上一篇:vue11--组件之间的通信--子组件往父组件传值(不可自动触发)


下一篇:知识点总结-结构体