vue前端请求图片流文件乱码处理

1.请求接口显示乱码

乱码信息.png

2.处理方法

new_posters() {
      axios
        .get("接口地址", { responseType: "arraybuffer" }) //设置请求头
        .then(data => {
          console.log(data);
          //自定义名字 imgUrl 将请求回来的图片信息放到里面
          this.imgUrl =
            "data:image/png;base64," +
            btoa(
              new Uint8Array(data.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
        })
        .catch(err => {});
    }

3.显示图片

<img alt="图片加载失败..." :src="imgUrl" />

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 4,559评论 1 16
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 3,597评论 3 7
  • AFHTTPRequestOperationManager 网络传输协议UDP、TCP、Http、Socket、X...
    Carden阅读 2,140评论 0 12
  • 【Android 网络编程】 HTTP HTTP简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的...
    Rtia阅读 1,209评论 0 18
  • 首选,我们选择PROJECT这个选项 然后在下面可以看到localizations就是我已经本地化了的语言,这个时...
    initMoney阅读 53评论 0 1