使用FieleRader API创建VUE.JS文件读取器组件

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

如果我们只是想读取一个文本文件，以便在UI级别对其进行一些琐碎的操作，那么我们就不需要将文件发送到服务器。例如，可以从文件中填充文本。

FileReaderAPI

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>

 <label class="text-reader">

   <input type="file" @change="loadTextFromFile">

 </label>

</template>

<script>

export default {

 methods: {

   loadTextFromFile(ev) {

     const file = ev.target.files[0];

     const reader = new FileReader();

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

     reader.readAsText(file);

   }

 }

};

</script>

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

使用组件

假设您已经引入了App.vue组件，让我们使用它来演示我们的组件：

<template>

 <div id="app">

   <textarea rows="10" v-model="text"></textarea>

   <br>

   <text-reader @load="text =$event"></text-reader>

 </div>

</template>

<script>

import FileReader from"./FileReader";

export default {

 name: "app",

 data: () => ({ text: "" }),

 components: {

   FileReader

 }

};

</script>

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

奖励：给上传按钮增加样式

<input type="file"> 标签在不同的浏览器呈现方式是不同的，如果我们想要一个自定义样式，我们可以隐藏它，并用 <label>标签替换它。

隐藏input,可以使用opacity:0;css属性。使用display:blokc;或者visibility:hidden;

还需要一个positioning和z-index组合，以便把它放在标签后面。

<template>

 <label class="text-reader">

   Read File

   <input type="file" @change="loadTextFromFile">

 </label>

</template>

<style>

.text-reader {

 position: relative;

 overflow: hidden;

 display: inline-block;

 /* Fancy button style  */

 border: 2px solid black;

 border-radius: 5px;

 padding: 8px 12px;

 cursor: pointer;

}

.text-reader input {

 position: absolute;

 top: 0;

 left: 0;

 z-index: -1;

 opacity: 0;

}

</style>

在https://codesandbox.io/s/4p0k1xly4 可以看到代码和演示。

原文链接：

https://alligator.io/vuejs/file-reader-component/

了解新钛云服

新钛云服出品的精品技术干货