vue2实现字节流byte[]数组的图片预览

项目使用vantui框架，后端返回图片的字节流byte[]数组，在移动端实现预览，实现代码如下：

<template>
	<!-- 附件预览 -->
	<div class="file-preview-wrap">
		<van-overlay :show="show">
			<div class="wrapper" id="preview-box" @click="show = !show" @click.stop></div>
		</van-overlay>
	</div>
</template>
<script>
import { httpPostMethod } from '../common/HttpService';
export default {
    data() {
		return {
			show: false,// 弹窗是否显示
			pdfUrl:'',// pdf地址
		}
	},
	methods: {
		// 字节流转化预览
		previewBytes(byte) {
			// 字节流转化为字符串
			var str12 = this.arrayBufferToBase64(byte);//转换字符串
			var outputImg = document.createElement('img');
			outputImg.src = 'data:image/png;base64,'+str12;
			outputImg.style.width = '100%';
			document.getElementById('preview-box').innerHTML = '';
			document.getElementById('preview-box').appendChild(outputImg);
			this.show = true;
		},
		// 打开附件
		openAtta(attaInfo, handleFun){
			// res 模拟接口获取的字节流数组byte[]数据
			let res = [/* 字节流数组byte[]数据，示例数据在下面链接内 */];
			this.previewBytes(res.FILE_TYPE);
		}
	}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

字节流数组byte数据示例下载

效果如图所示：