uniapp将图片转化为base64格式,并用url展示出来

news2024/9/23 14:55:42

效果图:

 编码:

<template>
	<view class="container">
		<button @click="chooseImage">选择图片</button>
		<image v-if="base64Image" :src="base64Image"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base64Image: ''
			};
		},
		methods: {
			chooseImage() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success(res) {
						const tempFilePath = res.tempFilePaths[0];
						uni.getFileSystemManager().readFile({
							filePath: tempFilePath,
							encoding: "base64",
							success(data) {
								console.log("图片的Base64数据:", data.data);
								_this.base64Image = "data:image/jpeg;base64," + data.data;
							},
							fail(error) {
								console.log("读取文件失败:", error);
							}
						});
					},
					fail(error) {
						console.log("选择图片失败:", error);
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		margin: 20px;
	}
</style>

注解:

_this.base64Image = "data:image/jpeg;base64," + data.data表示什么?

this.base64Image是一个用于在视图中展示图片的数据绑定。通过给this.base64Image赋值一个以"data:image/jpeg;base64,"开头的字符串,然后将Base64编码的图片数据拼接在后面,就可以将这个Base64格式的图片数据作为URL来展示在页面上

uni.chooseImage?

从本地相册选择图片或使用相机拍照

文档:uni.chooseImage(OBJECT) | uni-app官网

uni.getFileSystemManager().readFile({})?

使用uni-app中FileSystemManager的readFile方法读取文件

文档:uni.getFileSystemManager() | uni-app官网

filePath(必填):要读取的文件路径,可以是相对路径或绝对路径。

encoding(可选):文件的编码格式,默认值为 'utf8'。如果需要将文件内容转换为 Base64 格式,则需要将该值设置为 'base64'。

success(可选):文件读取成功后的回调函数,接收一个参数表示读取到的文件数据。

fail(可选):文件读取失败时的回调函数,接收一个参数表示错误信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/710687.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

决策树 ID3 手工推导

掌握决策树ID3算法的原理&#xff0c;通过增益熵实现手工推导的过程。 参考案例&#xff1a;https://cuijiahua.com/blog/2017/11/ml_2_decision_tree_1.html 机器学习实战教程(二)&#xff1a;决策树基础篇之让我们从相亲说起 决策树 ID3 手工推导 决策树 ID3 简介 ID3作为一种…

【剑指offer专项突破版】二叉树篇——“C“

文章目录 前言一、二叉树剪枝题目分析思路分析代码 二、序列化与反序列化二叉树题目分析思路分析代码 三、从根节点到叶节点的路径数字之和题目分析思路分析代码 四、 向下的路径节点之和题目分析思路分析思路①代码思路②代码 五、节点之和最大的路径题目分析思路分析代码 六、…

Linux--查看Linux的体系结构以及内核版本:uname

语法&#xff1a; uname 选项功能&#xff1a; uname用来获取电脑和操作系统的相关信息。 选项&#xff1a; -a或–all 详细输出所有信息&#xff0c;依次为内核名称&#xff0c;主机名&#xff0c;内核版本号&#xff0c;内核版本&#xff0c;硬件名&#xff0c;处理器类型&a…

【2023比惨大会】测试惨吗?舍我其谁!

2023年&#xff0c;流行“比惨”。 作为一个测试员&#xff0c;惨吗&#xff1f;&#xff01; 看后不要太现实 自学软件测试三个月&#xff0c;然 简历石沉大海 2022年度的绩效&#xff0c;2023年都要过完了 辞职大半年了&#xff0c;至今没找到合适的工作 昨天还在流泪加班&…

《阿里大数据之路》研读笔记(2)

前面的笔记地址&#xff1a; 《阿里大数据之路》研读笔记&#xff08;1&#xff09;_后季暖的博客-CSDN博客 规范化和反规范化总结就是 规范化让总的单一维度变成多个维度 然后每个维度就是一张表这样 适合OLTP 可以参考三范式 这样是为了减少冗余 比如一个商品有多个类目&…

这些接口测试工具你一定要知道

接口测试工具 接口测试工具如图&#xff1a; 1.Fiddler 首先&#xff0c;这是一个HTTP协议调试代理工具&#xff0c;说白了就是一个抓http包的工具。web测试和手机测试都能用到这个工具。既然是http协议&#xff0c;这个工具也能支持接口测试。 2.PostMan Postman一款非常流行…

【已解决】Spring boot项目获取到resource目录下文件完整路径怎么获取 ?

在实际开发过程中&#xff0c;可能有时候&#xff0c;我们将文件放在resource下&#xff0c;在程序中需要获取到文件路径然后操作。比如&#xff0c;将公钥放到resource文件夹下&#xff0c;在程序中需要获取到这个公钥的完整路径。怎么操作&#xff1f; 需要访问的文件位置 获…

数据库课程设计(教室设备故障报修系统)

题目&#xff1a;教室设备故障报修系统 内容与要求&#xff1a; 完成需求分析&#xff0c;写出功能需求和数据需求描述&#xff1b;在需求分析的基础上&#xff0c;完成数据库概念结构设计、逻辑结构设计、物理结构设计和数据库创建&#xff1b;完成视图、存储过程设计&#xf…

使用阿里云实现短信验证码

首先去阿里云中开启短信服务 然后申请自己的签名&#xff0c;发送的短信模板&#xff0c;之后点击右上角的头像&#xff0c;点击AccessKey&#xff0c;选第一个就行&#xff0c;然后保存这两个对应的值。 在等待签名和发送模板通过审核之后就可以配置我们的发送方法&#xff0c…

Android Framework的重要性及其对行业前景的影响~

随着智能手机和移动应用的兴起&#xff0c;Android操作系统成为全球最大的移动操作系统&#xff0c;而Android Framework作为其核心组件之一&#xff0c;扮演着至关重要的角色。Android Framework提供了众多的API和工具&#xff0c;为开发者提供了构建功能丰富、高效稳定的Andr…

大厂月入3w+,失业焦虑折磨着我

大家好&#xff0c;这里是程序员晚枫&#xff0c;小红书也叫这个名字。 周末和一位老朋友聚会&#xff0c;聊了聊一个很现实的收入问题&#xff0c;巧合的是&#xff1a;他的焦虑&#xff0c;竟然和月薪5k的我一模一样。 今天给大家分享一下。 1、外人看来&#xff0c;让人羡…

Scrpay框架之MongoDB--Index

目录 MongoDB-Index 概念 索引类型 创建索引 注意 样例 索引的查看 删除索引 语法 样例 检测索引的速度优势 Mongo-Unique Index And Compound Index 唯一索引&#xff08;Unique Index&#xff09; 添加唯一索引的语法 利用唯一索引进行数据去重 复合索引&a…

zkSync的ZK Stack:Hyperchains和Hyperbridges

1. 引言 ZK Stack有2个关键特性&#xff1a; sovereignty 主权&#xff1a;作为创建者&#xff0c;可对自己的链有完全的自由和权利来定制链的每一个方面。 Hyperchains独立运行&#xff0c;依赖以太坊L1来提供安全性和活性。 seamless connectivity 无缝连接。 Hyperbridges…

SolidWorks全球认证报名简章

SolidWorks CSWP专业认证考试 一、CSWP的起源 CSWP全名为Certified SolidWorks Professional &#xff0c;为SolidWorks原厂认证&#xff1b;在全球非常具有公信力。是健全与完整的3D CAD认证&#xff0c;相较于一般宣称是3D CAD认证&#xff0c;但是却没有投入完整的团队与完…

Barplot | 平平无奇的环形Barplot你掌握了吗!?~(附完整代码)

1写在前面 最近天天下雨&#xff0c;真是下得我没脾气啊&#xff0c;动不动就淋成狗。&#x1f62d; 下雨也就算了&#xff0c;还特别热。&#x1f912; 不知道是不是人到中年了&#xff0c;事情也特别的多&#xff0c;能静下心来思考的时间越来越少了。&#x1f61e; 也越来越…

SparkSQL与Hive整合(Spark On Hive)

1. Hive的元数据服务 hive metastore元数据服务用来存储元数据&#xff0c;所谓元数据&#xff0c;即hive中库、表、字段、字段所属表、表所属库、表的数据所在目录及数据分区信息。元数据默认存储在hive自带的Derby数据库。在内嵌模式和本地模式下&#xff0c;metastore嵌入在…

安装一个新虚拟环境——就叫它newtorch吧!

文章目录 1 新建一个虚拟环境newtorch2 安装pytorch1.7.1依赖包3 安装matplotlib2.2.34 安装torchsummary5 现在开始测试一下代码6 安装pandas 1 新建一个虚拟环境newtorch 打开anaconda prompt&#xff0c;输入&#xff1a; conda create -n newtorch python3.7.4// newtorc…

idea多模块测试——暂时不启动某个有问题的模块,之后再加载回来

文章目录 遇到问题解决方案暂时卸载然后还原 遇到问题 某个模块出了问题&#xff0c;运行不了项目 解决方案 暂时卸载 然后还原

云原生之深入解析Dapr安全性之访问控制策略

一、服务调用范围访问策略 ① 跨命名空间的服务调用 Dapr 通过服务调用 API 提供端到端的安全性&#xff0c;能够使用 Dapr 对应用程序进行身份验证并设置端点访问策略&#xff1a; Dapr 应用程序可以被限定在特定的命名空间&#xff0c;以实现部署和安全&#xff0c;当然仍然…

计算机基础知识学习笔记

目录 1.计算机奠基人—冯•诺依曼1.冯诺依曼结构2.冯诺依曼结构的特点 2.计算机的发展 感觉自己的计算机基础知识还很薄弱&#xff0c;工作之余补习一下。1.计算机奠基人—冯•诺依曼 1.冯诺依曼结构 冯诺依曼结构也称作普林斯顿结构&#xff0c;是一种将程序&#xff08;指令…