vue项目预览图片

1.图片为本地上传的预览：

<input type="file" ref="file"/>
<img :src="imgUrl"/>

 let fr = new FileReader()
 fr.readAsArrayBuffer(this.$refs.file.files[0])
 fr.addEventListener("loadend", (e) => {
    let buffer = e.target.result
    const bufferUrl = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    const imgUrl = 'data:image/png;base64,' + bufferUrl
    that.imgUrl = imgUrl
  }, false)

2.服务器传递过来的数据流，原理是一样的，FileReader读取返回的blob,注意接口responseType:'blob'

<img :src="imgUrl"/>

api(param).then(res => { // 接口
     let fr = new FileReader();
     fr.readAsArrayBuffer(res.data);
     fr.addEventListener("loadend", (e) => {
          let buffer = e.target.result;
          const bufferUrl = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ''));
          const imgUrl = 'data:image/png;base64,' + bufferUrl;
          that.imgUrl = imgUrl;
      }, false);
})

     3.服务器直接返回图片的临时地址，直接给imgUrl赋值即可。