【base64码转为图片，并预览】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【base64码转为图片，并预览】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

预览base64图片

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

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

（1）下载插件地址：https://ext.dcloud.net.cn/plugin?id=123
（2）使用HBuilderX导入插件
【base64码转为图片，并预览】
（3）哪里需要，就在哪里引入，默认路径是在src下边文章来源地址https://www.toymoban.com/news/detail-450606.html

<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>