有时候我们需要从文件中读取数据。在以前，你需要将其发送到服务器，然后返回所需的数据。问题是，现在我们还可以使用 FileReader API 直接访问浏览器中的文件。
如果我们只是想读取一个文本文件，以便在UI级别上做一些无关紧要的事情，那么就不需要将文件发送到服务器。下面的示例将实现从一个文件中读取相关的数据填充到一个 textarea 中。
FileReader API
FileReader API提供了一个很好的接口，可以使用文本或Blob对象类型以不同的方式读取数据。
FileReader 实例有一个 readAsText 方法，我们可以使用它来读取文件作为文本：
由于FileReader API是异步的，因此它公开了一些我们可以用来获得它的状态的事件。特别是，当读取文件时，我们需要 onload 事件来访问数据：
正如你所看到的，文本数据可以通过 e.target.result 来访问。
到目前为止，浏览器对其支持情况如下：
文件阅读器组件
前面的代码已经读取了一个文件，但是我们仍然要给它一个 file 对象。为此，我们必需使用 的HTML标记，这将触发一个 change 事件，然后通过 e.target.files 访问该文件。
让我们创建一个 FileReader 组件，将其组合在一起：
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)
}
}
})
