使用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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP内核探索:变量概述
2014/01/30 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
flask框架中的cookie和session使用
2021/01/31 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
关于Java finally的面试题
2016/04/27 面试题
电脑租赁公司创业计划书
2014/01/08 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
《灰雀》教学反思
2016/02/19 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书