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.resultconst bufferUrl = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ''))const imgUrl = 'data:image/png;base64,' + bufferUrlthat.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赋值即可。