File、Blob、FileReader

简介: File、Blob、FileReader

虽然之前一直都会使用,但是没有系统的去学习了解,前几天有一个pdf预览的需求,刚好有用到ArrayBuffer和Blob,所以在此记录一下,供之后查阅
image.png

上图很清晰的介绍了它们之间的关系。

Blob
blob简单来说就是一个不可修改的二进制文件。

File
提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。实际上File是特殊类型的Blob,Blob的属性和方法都可以用于File对象。

File 对象中只存在于浏览器环境中,在 Node.js 环境中不存在。
在 JavaScript 中,主要有两种方法来获取 File 对象:

input 元素上选择文件后返回的 FileList 对象;
文件拖放操作生成的 DataTransfer 对象(ondrop和ondragover)

FileReader
FileReader 是一个异步 API,用于读取文件并提取其内容以供进一步使用。FileReader 可以将 Blob 读取为不同的格式。
readAsDataURL()可用于选择完图片上传,直接预览的功能
readAsArrayBuffer() 可以将blob转为arrayBuffer
事件处理常用的有
load() 该事件在读取操作完成时触发;
progress() 该事件在读取 Blob 时触发。可以监控文件的读取进度。

相关文章
el-input el-select调整字体及内边距
1. 背景 el-input输入框默认提供的字体较小,且内边距较大。 这是为了提供统一的样式和好看的外观。 在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。
3065 0
|
存储
RandomAccessFile实现文件分割、合并
RandomAccessFile实现文件分割、合并
336 0
|
JavaScript 应用服务中间件 nginx
Nginx - 同一域名配置多个 Vue 项目(支持Webpack、Uniapp)
Nginx - 同一域名配置多个 Vue 项目(支持Webpack、Uniapp)
1340 0
Nginx - 同一域名配置多个 Vue 项目(支持Webpack、Uniapp)
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
620 130
|
存储 小程序 前端开发
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
1452 0
|
JavaScript 数据可视化 定位技术
echart:html中使用& echarts 的使用
本文介绍了如何在HTML中使用ECharts图表库,包括通过CDN引入ECharts和ECharts-GL,创建基本的柱状图示例,以及在Vue项目中使用ECharts的方法。同时,提供了快速安装和配置ECharts的代码示例,以及如何添加地图插件的指导。
1103 1
|
缓存 自然语言处理 开发工具
Python中 __pycache__文件夹是什么?
Python中 __pycache__文件夹是什么?
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
1485 3
|
JavaScript 应用服务中间件 nginx
nginx部署多个vue项目
nginx部署多个vue项目
203 0
|
监控 JavaScript 应用服务中间件
匿名用户访问的接口或者无登录态场景下接口防刷的解决方案
匿名用户访问的接口或者无登录态场景下接口防刷的解决方案
263 0