采坑记-读取本地图片
发布日期:2022-02-17 02:39:47 浏览次数:27 分类:技术文章

本文共 813 字,大约阅读时间需要 2 分钟。

前言

最近在写一个vue读取本地文件夹,然后页面展示vue文件夹的图片信息,有如下的疑惑,遂去了解原因。【onloadend是异步加载的,因此那里拿不到】

在这里插入图片描述

参考内容

URL.createObjectURL(object) 返回了一个DOMString包含了一个对象URL,该URL可用于指定源 object的内容。其参数为用于创建 URL 的File 对象、Blob 对象或者 MediaSource 对象。​

FileReader.readAsDataURL(file) 读取指定的 Blob 或 File 对象,读取时触发onload事件,返回的结果中将是一个包含data:URL格式的字符串(base64编码)以表示所读取文件的内容。

2,比较

2.1 内存使用

  • createObjectURL返回一段带hash的url,并且一直存储在内存中,直到document触发了unload事件(例如:document close)或者执行revokeObjectURL来释放

  • FileReader.readAsDataURL则返回包含很多字符的base64,并会比blob url消耗更多内存,但是在不用的时候会自动从内存中清除(通过垃圾回收机制)

使用createObjectURL可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存。

但是如果不太在意设备性能问题,并想获取图片的base64,则推荐使用FileReader.readAsDataURL

2.2 同步异步

  • createObjectURL是同步执行
  • FileReader.readAsDataURL是异步执行

这两种方法,参数都是blob对象或File 对象,返回一个可以用a标签打开的url,这两种方法都可用于下载文件。

参考链接 https://blog.csdn.net/qq_39258552/article/details/84133770

转载地址:https://blog.csdn.net/qq_39811414/article/details/108134046 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:vue 官方文档 - 自定义事件
下一篇:mouseenter、mouseleave、mouseover、mouseout理解

发表评论

最新留言

不错!
[***.144.177.141]2024年03月14日 06时18分55秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql函数大全 pdf,MySQL函数大全 2019-04-21
php 常用文件系统函数,php 文件系统函数整理介绍 2019-04-21
android pm.java,java – AM / PM的Android DateFormat因设备而异 2019-04-21
oracle存储过程调用sql文件,oracle - 在SQL Developer中运行存储过程? 2019-04-21
oracle同时报604和12507,V$SES_OPTIMIZER_ENV 查不到刚修改的隐含参数, 2019-04-21
zblog的php更换域名,zblogphp更换域名后,原zblog里使用了固定域名,登录不进去怎么办... 2019-04-21
oracle dnfs 配置,Source of Oracle参数解析(dnfs_batch_size) - django-\/\/ i K | 2019-04-21
oracle所需的环境,转:面对一个全新的oracle环境,首先应该了解什么? 2019-04-21
linux 小数四则运行,shell四则运算(整数及浮点数)的方法介绍 2019-04-21
linux系统分区后进入紧急模式,Linux系统的救援模式应用详解 2019-04-21
linux配置匿名ftp服务器,在Linux环境中使用vsftpd搭建ftp实现匿名上传详细配置 2019-04-21
linux创建硬盘分区lvm,LVM创建及分区调整、更换LVM硬盘 2019-04-21
FreeBSD可以安装Linux软件吗,在Linux服务器上面通过网络安装FreeBSD 2019-04-21
.net core linux 桌面应用,C# dotnet core + AvaloniaUI 开发桌面软件,hello world 2019-04-21
linux tcp 113错误,linux系统报tcp_mark_head_lost错误的处理方法 2019-04-21
南昌工程学院c语言答案,南昌工程学院C语言程序设计基础课件第3讲运算符和表达式... 2019-04-21
python学画画_python学画画(下) 2019-04-21
云栖社区 mysql_【直播结束,已更新回放】PG、MySQL到底哪个好?云栖说这次请来五位专家撕了一下-阿里云开发者社区... 2019-04-21
老男孩mysql 百度云_英语语录:除了你,没人能掌控你的幸福 2019-04-21
mysql驱动多次执行问题_Laravel5.2队列驱动expire参数设置带来的重复执行问题 数据库驱动... 2019-04-21