问题描述

前台需要展示图片，期望后台直接返回图片地址，但是后台给的是的文件流而不是一个图片地址，需要把文件流转为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’后的接口返回：

2. 在需要的展示图片的位置添加一个img标签

 <img
            :src="verifyImg"
            @click="getVerify"
            style="height:41px;max-width:40%;"
          />

3. 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);
        });
    },

5. 最终展示在前端页面的图片如下图所示
   
   参考：前端把图片文件流转为base64格式展示在前端，显示图片