【Vue2 + HBuilder】Base64码转为图片，并预览_base64图片预览

1. 开发工具及需求介绍
   （1）开发工具：HBuilder
   （2）数据库：SQLite
   （3）组件库：uni-app
   （4）需求：（后端）将图片信息加密，前端接收到的是一个base64码。前端需要利用这些信息，转成<image src="imageURL"></image>中的imageURL,以便能显示出图片。后端返回的信息，我们必需要的是”图片类型“和”图片信息“
   
   

2. 将base64码显示成图片
   （1）格式：前端要显示base64编码的图片，有一定的格式，即 data:图片类型;base64,base64码的图片信息
   （2）将后端返回的数据拼接成我们想要的格式，展示出来

<template>
	<view>
 	   <!--image是uni-app的组件-->
 	   <!--src需动态获取并,从这里可自定义方法，拼接成我们需要的格式然后返回，这样就可以展示了-->
	   <!--click点击事件用来预览base64图片的->
 	   <image :src="previewPhoto(picture.图片类型, picture.图片信息chunk)" @click="handlePreview(picture.图片类型,picture.图片信息chunk)"></image>
	</view>
</template>

<script>
	export default {
		data(){},
		methods:{
		    // 将base64码转换，并显示出图片
			previewPhoto(type, chunk){
				let imgURL = "data" + ":" + type + ";" + "base64," + chunk;
				return imgURL;
			}
		}
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 预览base64图片

uni-app 自带组件image在触发点击事件时，不支持通过previewImage预览图片。因此需要利用插件

原理：预览前先把base64转成正常图片，转换的图片会自动保存在缓存里，预览图片的地址就是转换出来的这张图的缓存地址了，这样就可以预览了

（1）下载插件地址：https://ext.dcloud.net.cn/plugin?id=123
（2）使用HBuilderX导入插件

（3）哪里需要，就在哪里引入，默认路径是在src下边

<template>
	<view>
	   <!--click点击事件用来预览base64图片的->
 	   <image :src="" @click="handlePreview(picture.图片类型,picture.图片信息chunk)"></image>
	</view>
</template>

<script>
import {base64ToPath} from '@/js_sdk/mmmm-image-tools/index.js'
export default {
	data(){},
	methods:{
	    // 预览图片
		handlePreview(type, chunk) {
			uni.showLoading({
				title: '预览加载中'
			})
			// imgURL为所要预览的base64图片
			let imgURL = 'data' + ":" + type+ ";" + "base64," + chunk;
			let imagesArry = [];
			base64ToPath(imgURL).then(path => {
				uni.hideLoading();
				imagesArry[0] = path
				uni.previewImage({
					current: 0,
					urls: imagesArry
				})
			})
		},
	}
}
</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