携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

HTML5定义了FileReader作为文件API的重要成员用于读取文件。

FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的实例拥有的方法：

readAsText(file,encoding)：按照字符读取文件内容，结果用字符串形式表示。encoding为文本编码方式，默认值为UTF-8。

readAsBinaryString(file)：按照字节读物文件内容，结果为文件的二进制串。

readAsArrayBuffer(file)：按照字节读取文件内容，结果用ArrayBuffer对象表示。

readAsDataURL(file)：读取文件内容，结果用data:url 的字符串形式表示。

abort()：终止文件读取操作。

其中，readAsDataURL会将文件内容进行base64编码后输出，可使用readAsDataURL实现对图片的预览，即将读取的结果赋给图片的src属性。readAsText(file,encoding)可按照指定编码方式读取文件，是按照字符读取文件内容，对于文本文件，只需要按照规定的编码方式读取即可，对于内部组成不是字符排列的媒体文件（图片、音频、视频），会产生乱码。

监听处理文件读取事件：

监听文件读取，回调函数返回文件读取结果。

onabort：当读取操作被终止时使用。

onerror：当读取操作发生错误时使用。

onload：当读取操作成功完成时调用。

onloadend：当读取操作完成时调用，无论成功或失败。

onloadstart：当读取操作开始时调用。

onprogress：在读取数据过程中周期性调用。

js操作原生DOM读取文件

操作原生DOM是通过getElementById获取相关元素。

...
<!-- 多文件上传 -->
<input type="file" id="file" multiple onchange="fileChange()" />
<!-- 展示上传的文件内容 -->
<textarea id="textarea"></textarea>
...
function fileChange() {
    // 通过DOM获取上传的文件
    var fileList = document.getElementById('file').files;
    // 遍历得到每个文件
    for (var i = 0; i < fileList.length; i++) {
        // 得到FileReader对象
        var reader = new FileReader();
        // 读取文件中的内容，执行读文件函数，设置编码格式。
        reader.readAsText(fileList[i], 'UTF-8');
        // 读取文件，得到文件内容。
        reader.onload = function (e) {
            var content = e.target.result;
            var textarea = document.getElementById('textarea');
            textarea.value += content;
        }
    }
}
...

注意：reader.onload读取文件是异步的。

Vue读取文件

使用vue操作是通过ref获取相关元素。

...
<!-- 多文件上传 -->
<input type="file" ref="file" multiple @change="chooseFile" />
<!-- 展示上传的文件内容 -->
<textarea ref="textarea" id="textarea" v-text="textarea" />
...
data() {
    return {
      textarea: "",
    };
},
methods: {
    chooseFile() {
      // 使用ref获取DOM，得到上传的文件信息。
      let fileList = this.$refs.file.files;
      // 多文件上传，遍历得到每个文件信息。
      for (let i = 0; i < fileList.length; i++) {
        // 得到FileReader对象。
        let reader = new FileReader();
        // 读取文件中的内容，执行读文件函数，设置编码格式。
        reader.readAsText(fileList[i], "UTF-8");
        // 这里使用箭头函数，那么里面的this就是vm，就可以使用this.textarea。
        reader.onload = (e) => {
          let content = e.target.result;
          // 将全部文件里面的内容输出。
          this.textarea += content;
        };
      }
    }
},
...

在这里使用了箭头函数，这样里面的this就是vm对象。使用普通函数this就是FileReader对象。

js读取文件并输出文件内容

js操作原生DOM读取文件

Vue读取文件