使用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入门基础之私有变量
Feb 23 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
发现的以前不知道的函数
2006/09/19 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python可变参数函数用法实例
2015/07/07 Python
python实现多线程的两种方式
2016/05/22 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
OpenCV实现人脸识别
2017/04/07 Python
python pandas生成时间列表
2019/06/29 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python属于解释型语言么
2020/06/15 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
离婚财产处理协议书
2014/09/30 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
中学生运动会广播稿
2015/08/19 职场文书
给校长的建议书范文
2015/09/14 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js