现在的编程行业越来越卷了，前后端分离上传文件内容时，需要把上传的文件内容显示在页面上。以前做的excel批量导入设备都是前端把excel信息列出来，然后通过参数的方式提交。最近做的导入json数据内容时，需要把json显示在页面上说是提高用户体验。好吧，那就干！

vue读取本地文件内容主要是用到 FileReader 这个Web API 接口的readAsText方法

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。参考地址

主要方法有：

FileReader.abort() 中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。

FileReader.readAsText() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

实例

<input ref="file-upload-input" class="file-upload-input" type="file" accept=".json" @change="handleClick">


handleClick(e) {
    let _self = this
    const files = e.target.files
    const rawFile = files[0] // only use files[0]
    if (!window.FileReader) return
    let reader = new FileReader()
    reader.readAsText(rawFile)
    reader.onloadend = function () {
        _self.importContent = this.result
        // 注意这里不能用 this.importContent 来赋值，必需先前面重新定义this为其实名，才能赋值
    }
}