vue 异步获取图片并加载

使用this.$http()获取json中的数据，后面可增加参数。

then()方法异步执行，就是当then()前面的方法执行完之后在执行then()里面的方法，这样就不会发生获取不到数据的问题。

 

<div >

<button type="text" size="small" @click="view()">加载图片</button>

<img :src="imageurl" >

</div>

 

//加载后端返回的byte[]图片 

view(id){
    var scene="xx"
    this.$http({
            url: this.$http.adornUrl('xxxx'),
            method: 'post',
            data: {
                 'scene': scene
             },
            responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
            }).then(function (res) {  // 将后台的图片二进制流传华为base64
               return 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data +              String.fromCharCode(byte), ''));
            }).then(data=>{
            this.imageurl=data; // data即为图片地址
        })    
}

 // 效果图