使用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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
RequireJS使用注意细节
May 15 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 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
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Bootstrap精简教程
2015/11/27 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
简单的python后台管理程序
2017/04/13 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Python用SSH连接到网络设备
2021/02/18 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
小学后勤管理制度
2014/01/14 职场文书
教师网络培训感言
2014/03/09 职场文书
经典促销广告词大全
2014/03/19 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2015年推普周活动方案
2015/05/06 职场文书
教学质量月活动总结
2015/05/11 职场文书
初中毕业感言300字
2015/07/31 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Python中requests做接口测试的方法
2021/05/30 Python
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
python中opencv实现图片文本倾斜校正
2021/06/11 Python