vue axios从服务器加载图片并显示

使用场景: 后台传给前端一个图片二进制流,但是要添加httpp header,但是在传统的用img标签查看图片,无法添加http header

    this.$axios({
           method: 'get',
           url: "img url" ,
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
             "token": this.token  // 必须添加的请求头
           },
           responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
         }).then(function (response) {  // 将后台的图片二进制流传华为base64
           return 'data:image/png;base64,' + btoa(
             new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
           );
         }).then(data=>{
           _this.imgUrl=data; // data即为图片地址
          });

 

posted @ 2019-05-17 20:19  甜甜宝宝  阅读(6359)  评论(0编辑  收藏  举报