这篇文章主要介绍了使用FileReader API创建一个Vue的文件阅读器组件,需要的朋友可以参考下

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

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

文件阅读器组件

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

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

<template id="fileReader">
 <label>
  <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 属性设置为有效的加载事件。

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

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

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

添加样式

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

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

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

<template id="fileReader">
 <label>
  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;
 }
}

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

最新资讯
互金协会披露资金存管信息 真假存管一目了然

互金协会披露资金存管

据记者了解,后续互金协会将继续有序组织已通过资金存管
谷歌将向手机商收费 华为OPPO小米恐受影响

谷歌将向手机商收费

为反击欧盟50亿美元罚单,谷歌调整了欧洲手机、平板电脑
中国互金协会披露存管信息 5家银行对接46家P2P平台

中国互金协会披露存管

信融投资、微车融、和丰永讯虽然已经分别在2017年6月
互联网公司时尚穿搭指南

互联网公司时尚穿搭指

着装,是互联网公司区别于其它公司的天然结界。
Uber自成立以来首次发行债券 筹资20亿美元

Uber自成立以来首次发

此次债券发行吸引了充足的投资者兴趣,促使承销商摩根士
NASA命名约20个新星座,包括“哥斯拉”“绿巨人”

NASA命名约20个新星座

综合报道,美国宇航局命名了约20个新星座,以纪念天体观测
最新文章
vue中引用swiper轮播插件的教程详解

vue中引用swiper轮播

这篇文章主要介绍了vue中引用swiper轮播插件的方法,在
JS实现的视频弹幕效果示例

JS实现的视频弹幕效果

这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascr
jQuery实现的页面弹幕效果【测试可用】

jQuery实现的页面弹幕

这篇文章主要介绍了jQuery实现的页面弹幕效果,涉及jQu
深入理解Vue 组件之间传值

深入理解Vue 组件之间

这篇文章较详细的给大家介绍了vue组件之间传值的方法,
bootstrap实现点击删除按钮弹出确认框的实例代码

bootstrap实现点击删

本文通过实例代码给大家介绍了bootstrap实现点击删除
详解vue移动端项目的适配(以mint-ui为例)

详解vue移动端项目的

这篇文章主要介绍了详解vue移动端项目的适配(以mint-u