开发工具及需求介绍
(1)开发工具:
(2)数据库:
(3)组件库:uni-app
(4)需求:(后端)将图片信息加密,前端接收到的是一个码 。前端需要利用这些信息,转成中的,以便能显示出图片 。后端返回的信息,我们必需要的是”图片类型“和”图片信息“
文章插图
将码显示成图片
(1)格式:前端要显示编码的图片,有一定的格式,即 data:图片类型;,码的图片信息
【【base64码转为图片,并预览】】(2)将后端返回的数据拼接成我们想要的格式,展示出来
data(){},methods:{// 将base64码转换,并显示出图片previewPhoto(type, chunk){let imgURL = "data" + ":" + type + ";" + "base64," + chunk;return imgURL;}}}
预览图片
文章插图
uni-app 自带组件image在触发点击事件时,不支持通过预览图片 。因此需要利用插件
原理:预览前先把转成正常图片,转换的图片会自动保存在缓存里,预览图片的地址就是转换出来的这张图的缓存地址了,这样就可以预览了
(1)下载插件地址:
(2)使用导入插件
(3)哪里需要,就在哪里引入,默认路径是在src下边
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] = pathuni.previewImage({current: 0,urls: imagesArry})})},}}
- Docker阿里云镜像仓库加速器配置
- int n=10的sizeof 为什么是四_mongodb内核源码实现、性能调优
- 2024王道数据结构课后习题代码
- 看完此文还不懂NB-IoT,你就过来掐死我吧...【转】
- html网页设计实例范例带代码_ui设计师需要掌握什么知识?
- 【数据结构】复习攻略——计算机考研最重要的专业课
- 阿里云镜像仓库 【Docker】Docker之镜像上传
- 2022年中国人工智能产业生态图谱
- 二 【3D点云】分割算法总结
- remix 连接本地项目