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

效果图:

 编码:

<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 = thisuni.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.hqwc.cn/news/5373.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SNMP 计算机网络管理 实验2(二) SNMP服务与常用网管命令之任务三:对同学的计算机进行网络管理 任务四:查询计算机网卡的相关信息

⬜⬜⬜ &#x1f430;&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;(*^▽^*)欢迎光临 &#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;&#x1f430;⬜⬜⬜ ✏️write in front✏️ &#x1f4dd;个人主页&#xff1a;陈丹宇jmu &am…

Redis高可用

Redis高可用 一、redis高可用类型 类型说明持久化持久化是最简单的高可用方法(有时甚至不被归为高可用的手段)&#xff0c;主要作用是数据备份&#xff0c;即将数据存储在硬盘&#xff0c;保证数据不会因进程退出而丢失主从复制主从复制是高可用Redis的基础&#xff0c;哨兵和…

手机记事本中的内容转到新手机不见了,怎么办?

在更换新手机时&#xff0c;很多网友都会面临这样一个问题&#xff0c;这就是旧手机中的重要数据如何转移到新手机上。一般来说&#xff0c;如果是相同品牌的手机&#xff0c;我们可以借助手机云空间账号进行数据的同步&#xff1b;但如果使用的是不同品牌的手机&#xff0c;这…

HPM6750系列--第五篇 使用Segger Embedded Studio for RISC-V开发环境

一、目的 之前的博文中《HPM6750系列--第四篇 搭建Visual Studio Code开发调试环境》我们介绍了如何使用visual studio code进行开发调试&#xff0c;但是用起来总缺少点感觉&#xff0c;那么有没有更加友好一些的IDE用来开发呢&#xff1f; 本篇主要介绍如何使用Embedded Stud…

ERP重构-SLA子分类账-分布式实现方案

背景 ERP中的GL总账模块&#xff0c;明细数据来源于各个业务模块如库存、成本、应收、应付、费控、资产等&#xff0c;统称为子模块&#xff0c;生成的账叫做子分类账。然而记账的业务逻辑各式各样&#xff0c;但是最终输出都是来源、类型、期间、科目、借贷金额等等关键信息。…

【机器学习】主成分分析实现案例 (PCA)

一、说明 这篇文章的目的是提供主成分分析&#xff08;PCA&#xff09;的完整和简化的解释。我们将逐步介绍它是如何工作的&#xff0c;这样每个人都可以理解并使用它&#xff0c;即使是那些没有强大数学背景的人。 PCA是网络上广泛覆盖的机器学习方法&#xff0c;并且有一些关…

Vue计算属性与监听器

文章目录 计算属性配置项 computedHTML 结构Vue 实例数据方法计算属性绑定数据和方法完整代码 监听器配置项 watch简单类型写法深度监听写法 计算属性配置项 computed 使用 Vue 实现一个商品价格计算器&#xff0c;设置一个初始单价&#xff0c;初始数量为 1&#xff0c;用户可…

Android之OkHttp框架的分析

Okhttp是Android开发常用的一个网络请求框架&#xff0c;下面将按照自己的理解将okhttp分为三条主线进行分析。 文章目录 使用方式OkHttp第一条主线&#xff1a;请求发送到哪里去了&#xff1f;OkHttp第二条主线&#xff1a;请求是如何被消费的&#xff1f;OkHttp第三条主线&a…

《PyTorch深度学习实践》第十讲 卷积神经网络(基础篇)

b站刘二大人《PyTorch深度学习实践》课程第十讲卷积神经网络&#xff08;基础篇&#xff09;笔记与代码&#xff1a;https://www.bilibili.com/video/BV1Y7411d7Ys?p10&vd_sourceb17f113d28933824d753a0915d5e3a90 上一讲中MNIST数据集的例子采用的是全连接神经网络&#…

ModaHub魔搭社区:向量数据库Milvus产品问题(三)

目录 Milvus 的数据落盘逻辑是怎样的&#xff1f; Mishards 推荐的配置是什么&#xff1f; Mishards 支持 RESTful API 吗&#xff1f; 什么是归一化&#xff1f;Milvus 中为什么有时候需要归一化&#xff1f; 为什么欧氏距离和内积在计算向量相似度时的结果不一致&#x…

算法与数据结构(六)

一、图 一、临接表 表示方法如下&#xff1a; 带权值的无向图的构建&#xff1a; #define MaxInt 32767 // 极大值 #define MVNum 100 // 最大定点数 typedef int ArcType; // 边的权值类型 typedef char VerTexType; // 顶点数据类型//弧(边)的结点结构 st…

当金融风控遇上人工智能,众安金融的实时特征平台实践

导读&#xff1a;随着企业数字化转型升级&#xff0c;线上业务呈现多场景、多渠道、多元化的特征。数据要素价值的挖掘可谓分秒必争&#xff0c;业务也对数据的时效性和灵活性提出了更高的要求。在庞大分散、高并发的数据来源背景下&#xff0c;数据的实时处理能力成为企业提升…