有的时候你是否有这样的需求：我们在表单中，某一段我需要将本地某个文件中的内容直接copy到某个输入框中，但是又不想在本地直接打开这个文件，我们需要的就是，在界面上直接选择本地文件，然后自动识别选中文件中的内容，最后自动填写到输入框中，想要的如下图展示效果：
从本地成功选择文件后截图
其实这个实现起来非常容易，特别是在vue中，框架本身为你提供了数据双向绑定的功能，那我们来捋一捋，这个过程是怎样的。很简单，第一步：我们得通过界面从本地选择一个要读取的文件；第二步：文件选择好后，我们要读取文件中的内容；第三步：将我们读取到的内容赋值给对应的input的value（其实只要能够正确读取到数据，在哪儿显示都是可以的，这里呢我们是显示到一个输入框中的）。 过程很简单，那么具体我们来实现一下。
具体实现步骤：
1、首先我们建立两个输框，一个是用来显示读取文件后的数据，我们给它绑定了变量inputText，另一个是用来选择本地文件的。在选择本地文件的input标签中，我们将type设置为file类型，同时在change事件中绑定了copeFile方法，这个方法是为了处理，当我们选择好本地文件后、获取文件内容后能第一时间将内容赋给第一个输入框，然后显示出文件内容。
2、重点来了，copeFile方法是如何实现的呢？非常简单，它其实就是处理了在成功选择好本地文件后，去读里面的内容，然后再将内容复制给inputText变量这整个过程。由于第一个输入框通过v-model="inputText"绑定了inputText变量，所以，一旦拿到数据后就会在对应的输入框中展示数据。这里，有个重难点就是读文件会用到FileReader API，不清楚的小伙伴可以去看看FileReader API接口的使用方法，以及调用机制。FileReader 实例有一个readAsText方法，我们可以使用它来读取文件作为文本：const reader = new FileReader(); reader.readAsText(file); 通过render.result在读取操作完成后，读取文件内容。由于FileReader API是异步的，所以我在此处用到了setTimeout，1秒后取数据，确保能够拿到数据。当然你也可以通过onload来获取数据。
具体代码截图：
好了，简单的文件阅读器就讲完啦，功能是实现了，样子是比较丑的，样式这一块的话就你们自己根据实际需要自行设计了哦。如果您之前没有见过或者使用过FileReader API，那么建议您花一点时间再看看这个链接https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
参考链接：
网友评论