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


Posted in Javascript onApril 03, 2018

有时候我们需要从文件中读取数据。在以前,你需要将其发送到服务器,然后返回所需的数据。问题是,现在我们还可以使用 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创建Vue文件阅读器组件

文件阅读器组件

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

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

<template id="fileReader">
 <label class="text-reader">
  <input type="file" @change="loadTextFromFile" />
 </label>
</template>

Vue.component('file-reader',{
 template: '#fileReader',
 methods: {
  loadTextFromFile: function (e) {
   const file = e.target.files[0]
   const reader = new FileReader()

   reader.onload = e => this.$emit('load', e.target.result)
   reader.readAsText(file)
  }
 }
})

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

使用组件

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

<div id="app">
 <textarea rows="10" v-model="text"></textarea>
 <file-reader @load="text = $event"></file-reader>
</div>

let app = new Vue({
 el: '#app',
 data () {
  return {
   text: ''
  }
 }
})

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

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

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

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

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

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

添加样式

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

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

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

<template id="fileReader">
 <label class="file-reader">
  Read File
  <input type="file" @change="loadTextFromFile" />
 </label>
</template>

.file-reader {
 position: relative;
 overflow: hidden;
 display: inline-block;
 border: 2px solid black;
 border-radius: 5px;
 padding: 8px 12px;
 cursor: pointer;

 input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
 }
}

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

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

Javascript 相关文章推荐
JavaScript中的全局对象介绍
Jan 01 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
vue内置指令详解
Apr 03 #Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 #Javascript
Angular2进阶之如何避免Dom误区
Apr 02 #Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
详解webpack-dev-server的简单使用
Apr 02 #Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
浅析JS运动
2015/12/28 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
小型女装店的创业计划书
2014/01/09 职场文书
小学信息技术教学反思
2014/02/10 职场文书
安全生产汇报材料
2014/02/17 职场文书
廉洁教育学习材料
2014/05/19 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
实习生矿工检讨书
2014/10/13 职场文书
服务明星事迹材料
2014/12/29 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
运动会通讯稿200字
2015/07/20 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle