使用FileReader API创建一个Vue的文件阅读器组件

本文主要是介绍使用FileReader API创建一个Vue的文件阅读器组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

特别声明:此篇文章内容来源于@Alex Jover Morales的《Creating a Vue.js File Reader Component Using the FileReader API》一文。

有时候我们需要从文件中读取数据。在以前,你需要将其发送到服务器,然后返回所需的数据。问题是,现在我们还可以使用FileReader API直接访问浏览器中的文件。

如果我们只是想读取一个文本文件,以便在UI级别上做一些无关紧要的事情,那么就不需要将文件发送到服务器。下面的示例将实现从一个文件中读取相关的数据填充到一个textarea中。

FileReader API

FileReader API提供了一个很好的接口,可以使用文本或Blob对象类型以不同的方式读取数据。

FileReader 实例有一个readAsText方法,我们可以使用它来读取文件作为文本:

const reader = new FileReader(); reader.readAsText(file);

由于FileReader API是异步的,因此它公开了一些我们可以用来获得它的状态的事件。特别是,当读取文件时,我们需要onload事件来访问数据:

const reader = new FileReader(); reader.onload = e => console.log(e.target.result);reader.readAsText(file);

正如你所看到的,文本数据可以通过e.target.result来访问。

提示:如果您和我一样都是第一次听说的FileReader API,那么建议您花一点时间阅读下面的教程。

  • 通过 File API 使用 JavaScript 读取文件

  • FileReader API

  • Reading Files Using The HTML5 FileReader API

  • Using The JavaScript FileReader API To Avoid File Upload Limits

  • Toying With the HTML5 File System API

到目前为止,浏览器对其支持情况如下:

文件阅读器组件

前面的代码已经读取了一个文件,但是我们仍然要给它一个file对象。为此,我们必需使用<input type="file">的HTML标记,这将触发一个change事件,然后通过e.target.files访问该文件。

让我们创建一个FileReader组件,将其组合在一起:

组件监听load事件,以便父组件能够处理数据。

使用组件

把新创建的file-reader组件挂载到#appdiv元素下,来演示我们的组件:

我们需要在data中添加一个text属性,并使用v-model将其绑定到textarea上。最后,我们将捕获@load事件,并通过$eventtext属性设置为有效的加载事件。

这个时候你看到的效果如下:

其实到现在,功能已经有了,在你的浏览器像下图这样操作,你就可以看到效果了:

特别提醒:我尝试了几种文件格式,对于图片、PDF等文件格式加载会乱码,但加载.md或者.doc之类的文件,对应的内容能正常的显示在textarea中。

添加样式

如果你阅读到这里的话,你应该看到了效果。长得很丑(事实上没有任何的样式效果)。接下来添加一些样式,让其看起来好看一些。

在每个浏览器中,<input type="file">的渲染效果是不一样的。如果我们想要一个相同的渲染效果,就需要有一个自定义的样式。那么可以将input隐藏,并使用<label>替代他。

要隐藏input,可以使用opacity:0或使用display:blockvisibility:hidden 让其具有可访问性。我们还需要使用positionz-index两属性,以便把它放在label后面:

当然,为了好看一些,你还可以给其他元素添加一些样式。最终你看到的效果如下:


文章涉及到图片和代码,如果展示不全给您带来不好的阅读体验,欢迎点击文章底部的 阅读全文。如果您觉得小站的内容对您的工作或学习有所帮助,欢迎关注此公众号。





W3cplus.com

————————————

记述前端那些事,引领web前沿


长按二维码,关注W3cplus



这篇关于使用FileReader API创建一个Vue的文件阅读器组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/895551

相关文章

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

如何使用Spring boot的@Transactional进行事务管理

《如何使用Springboot的@Transactional进行事务管理》这篇文章介绍了SpringBoot中使用@Transactional注解进行声明式事务管理的详细信息,包括基本用法、核心配置... 目录一、前置条件二、基本用法1. 在方法上添加注解2. 在类上添加注解三、核心配置参数1. 传播行为(

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

c++中std::placeholders的使用方法

《c++中std::placeholders的使用方法》std::placeholders是C++标准库中的一个工具,用于在函数对象绑定时创建占位符,本文就来详细的介绍一下,具有一定的参考价值,感兴... 目录1. 基本概念2. 使用场景3. 示例示例 1:部分参数绑定示例 2:参数重排序4. 注意事项5.

使用C++将处理后的信号保存为PNG和TIFF格式

《使用C++将处理后的信号保存为PNG和TIFF格式》在信号处理领域,我们常常需要将处理结果以图像的形式保存下来,方便后续分析和展示,C++提供了多种库来处理图像数据,本文将介绍如何使用stb_ima... 目录1. PNG格式保存使用stb_imagephp_write库1.1 安装和包含库1.2 代码解

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》:本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先,从DeepSeek平台获取API密钥,用于身份验证。添加HTTP客户端依赖使用Jav

一文教你使用Python实现本地分页

《一文教你使用Python实现本地分页》这篇文章主要为大家详细介绍了Python如何实现本地分页的算法,主要针对二级数据结构,文中的示例代码简洁易懂,有需要的小伙伴可以了解下... 在项目开发的过程中,遇到分页的第一页就展示大量的数据,导致前端列表加载展示的速度慢,所以需要在本地加入分页处理,把所有数据先放

Spring Boot Actuator使用说明

《SpringBootActuator使用说明》SpringBootActuator是一个用于监控和管理SpringBoot应用程序的强大工具,通过引入依赖并配置,可以启用默认的监控接口,... 目录项目里引入下面这个依赖使用场景总结说明:本文介绍Spring Boot Actuator的使用,关于Spri