Vue案例之文件阅读器组件
0 Views 前端 with
本文字数:725 字 | 阅读时长 ≈ 3 min

Vue案例之文件阅读器组件

0 Views 前端 with
本文字数:725 字 | 阅读时长 ≈ 3 min

本节主要讲述Vue.js 文件阅读器组件

Vue案例之文件阅读器组件

有时候我们需要从文件中读取数据。在以前,你需要将其发送到服务器,然后返回所需的数据。问题是,现在我们还可以使用FileReader API直接访问浏览器中的文件。

如果我们只是想读取一个文本文件,以便在UI级别上做一些无关紧要的事情,那么就不需要将文件发送到服务器。下面的示例将实现从一个文件中读取相关的数据填充到一个textarea中。

FileReader API

FileReader API提供了一个很好的接口,可以使用文本或Blob对象类型以不同的方式读取数据。

FileReader 实例有一个readAsText方法,我们可以使用它来读取文件作为文本:

1
2
const reader = new FileReader(); 
reader.readAsText(file);

由于FileReader API是异步的,因此它公开了一些我们可以用来获得它的状态的事件。特别是,当读取文件时,我们需要onload事件来访问数据:

1
2
3
const reader = new FileReader();
reader.onload = e => console.log(e.target.result);
reader.readAsText(file);

提示:**如果您和我一样都是第一次听说的FileReader API,那么建议您花一点时间阅读下面的教程。

文件阅读器组件

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Vue.component("file-reader", {
template: '<div id="fileReader"> <label class="text-reader"><input type="file" @change="loadTextFromFile" /></label></div>',
methods: {
loadTextFromFile: function(e) {
var file = e.target.files[0];
var reader = new FileReader();

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


reader.readAsText(file);
}
}
});

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

使用组件

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

1
2
3
4
<div id="app">
<textarea rows="10" v-model="text"></textarea>
<file-reader @load="text = $event"></file-reader>
</div>
1
2
3
4
5
6
var app = new Vue({
el: "#app",
data: {
text: ""
}
})

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

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

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

May 31, 2018
May 30, 2018
May 30, 2018