使用FileReader API创建一个Vue的文件阅读器组件

特别声明：此篇文章内容来源于@Alex Jover Morales的《Creating a Vue.js File Reader Component Using the FileReader API》一文。

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