uniapp框架中H5模式选择图片后Blob对象的使用

在uniapp框架中使用uni.chooseImage()时,发现在浏览器访问的情况下,res的数据结构如下,和在小程序访问下的结果不一样。

{
"errMsg":"chooseImage:ok",
"tempFilePaths":["blob:http://localhost:8080/53ff91e0-9730-4c89-95d7-1e294663d3aa"],
"tempFiles":[{}]
}

其中,tempFilePaths是一个表示图片文件路径的数组,tempFiles则是图片文件对应的Blob对象数组(虽然直接JSON.stringify(res)打印出来的是空对象,但是单独打印tempFiles[0].type或.size或.path或.name是有内容的)。

之所以在浏览器访问情况下,返回了这样的数据结构,是浏览器的一种对用户电脑本地文件系统的保护机制。

另外,这个Blob对象的内容当前是保存在内存中的,随时可能被清除,所以虽然tempFilePaths[0]直接赋值给src可以显示,但是不建议。

这时候,可以使用FileReader对象的readAsDataURL方法和它的回调函数来转换获取图片文件的内容并保存到其它非内存的位置上(如浏览器的本地存储)。

uni.chooseImage({count:1,sourceType:['album','camera'],success(res) {let reader = new FileReader();reader.onload = function(){let dataURL = reader.result;uni.setStorageS

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

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

相关文章

C语言如何实现函数单个形参添加默认值

前言 (1)如果有嵌入式企业需要招聘湖南区域日常实习生,任何区域的暑假Linux驱动实习岗位,可C站直接私聊,或者邮件:zhangyixu02gmail.com,此消息至2025年1月1日前均有效 (2&#xff0…

大话设计模式之简单工厂模式

简单工厂模式(Simple Factory Pattern)是一种创建型设计模式,属于工厂模式的一种。在简单工厂模式中,有一个工厂类负责根据输入参数的不同来创建不同类的实例。 简单工厂模式包含以下几个要素: 1. **工厂类&#xff0…

牛客的一道题(C)变种水仙花

描述: 变种水仙花数 - Lily Number:把任意的数字,从中间拆分成两个数字,比如1461 可以拆分成 (1和461),(14和61),(146和1),如果所有拆分后的乘积之和等于自身&#xff…

Qlib-Server部署

Qlib-Server部署 介绍 构建Qlib服务器,用户可以选择: 一键部署Qlib服务器逐步部署Qlib服务器一键部署 Qlib服务器支持一键部署,用户可以选择以下两种方法之一进行一键部署: 使用docker-compose部署在Azure中部署使用docker-compose进行一键部署 按照以下步骤使用docker…

day72Html

常用标签: 分类: 块级标签:独立成行 行级标签:不独立成行,同一行可放多个行级标 注意网页显示时,忽略空白字符,(回车符,空格,tab制表符) 一)块级标签&#xf…

python中的deque详解

deque(双端队列)是Python标准库collections模块中的一个类,它支持从两端快速添加和删除元素。deque为固定大小或者可变大小的队列提供了线程安全的实现,并且它比使用列表(list)来实现相同的功能更为高效。 …

.NET core 5.0 及以上的Windows Service开发

首先,一定要和.NET Framework区分开, 详细请看微软的2023年的最新官方文档 Create Windows Service using BackgroundService - .NET | Microsoft Learn Create a Windows Service installer - .NET | Microsoft Learn 同样微软的官方微博给出了开发…

【明道云】如何让用户可以新增但不能修改记录

【背景】 遇到一个需求场景,用户希望新增数据后锁住数据不让更改。 【分析】 在设计表单时直接将字段设置只读是不行的。字段设置只读将会直接让界面上此字段的前端组件不可编辑。包括新增时也无法填入。显然是不符合需求的。 需要既能新增,新增后又不…

【WebJs 爬虫】逆向进阶技术必知必会

前言 在数字化时代,网络爬虫已成为一种强大的数据获取工具,广泛应用于市场分析、竞争对手研究、舆情监测等众多领域。爬虫技术能够帮助我们快速、准确地获取网络上的海量信息,为决策提供有力支持。然而,随着网络环境的日益复杂和…

猫,路由器,WIFI

家庭网络常识 1:猫、路由器、wifi_哔哩哔哩_bilibili 入户光纤插到猫上面,网线连接猫和路由器,网线连接路由器和电脑。路由器可以发射WIFI。 手机通过WIFI连接到路由器。 左边是猫,右边是光猫。 (modem) …

重学SpringBoot3-SpringBoot可执行JAR的原因

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-SpringBoot可执行JAR的原因 Spring Boot可执行JAR的结构打包运行JAR 包内部结构 工作原理优点总结 Spring Boot 的一个核心特性是它的可执行 JAR&#x…

88. 合并两个有序数组(javascript)

给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。 注意:最终,合并后数组…

QML通过鼠标拖动的位置

当通过鼠标拖动Rectangle 的位置时,可以使用Qt Quick的MouseArea组件来实现 Rectangle {id: rectx:0;y:0width: 200; height: 100color: "lightblue"MouseArea {id: mouseAreaanchors.fill: parentdrag.target: rect//要拖动的项目的IDdrag.axis: Drag.XA…

25G SFP28 AOC线缆最新数据传输解决方案

在当今云计算、大数据、人工智能等领域,对高速数据传输的需求不断增加。传统的1G和10G网络已经无法满足数据中心日益增长的流量,因此迫切需要更高速的解决方案。25G SFP28 AOC有源光缆迎合了这一需求,成为连接数据中心、服务器、存储等25G设备…

游戏客户客户端面经

C#和C的类的区别C# List添加100个Obj和100 int内存是怎么变化的重载和重写的区别,重载是怎么实现的重写是怎么实现的?虚函数表是类的还是对象的用过哪些C的STLVector底层是怎么实现的Vector添加一百次数据内存是怎么变化Map的底层,红黑树的查…

增强现实(AR)和虚拟现实(VR)营销的未来:沉浸式体验和品牌参与

--- 如何将AR和VR技术应用于营销,以提高品牌知名度、客户参与度 增强现实(AR)和虚拟现实(VR)不再只是游戏。这些技术为品牌与受众互动提供了创新的方式。营销人员可以创造更好的客户体验,并为身临其境的故…

华为Mate 60 Pro+是双卡双待吗 华为Mate 60 Pro+是4g还是5g手机

华为mate60 pro支持双卡双待,卡片类型为nano-SIM卡为全球首款搭载双星卫星通信的手机,支持天通卫星电话及双向北斗卫星消息。 华为mate60 pro支持5G网络 华为Mate 60 Pro搭载了华为自研的麒麟芯片,拥有强大的计算能力和出色的能效比。无论是…

蓝桥杯23年第十四届省赛真题-填充|DFS,贪心

题目链接: 1.填充 - 蓝桥云课 (lanqiao.cn) 蓝桥杯2023年第十四届省赛真题-填充 - C语言网 (dotcpp.com) 说明: dfs就不再多说了,对于每个?都有0和1两个分支,数据范围是: 那么有m个 ?,时间复杂度就是…

Redis部署中的问题总汇

前言:本文内容为实操记录,仅供参考! Redis安装参考这篇文章:http://t.csdnimg.cn/G15Mv 本文是安装及使用过程中遇到的问题总结。 redis在解压完之后,使用make进行编译(在安装目录进行编译)。如…

2015年认证杯SPSSPRO杯数学建模B题(第二阶段)替换式密码全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 B题 替换式密码 原题再现: 历史上有许多密码的编制方法。较为简单的是替换式密码,也就是将文中出现的字符一对一地替换成其它的符号。对拼音文字而言,最简单的形式是单字母替换加密,也就是以每个…