FileReader与txt在线预览

界面中插入txt文件

两种情况：界面中直接插入可以编辑的字符串（markdown或者txt文本），直接在前端进行读取；或者上传文件到服务器，然后读取服务器中的内容。其中的第二种情况是问题7解决。

这里使用JS的方法

<input type="file" accept="img/jpg, img/png, txt/plain" onChange={this.handleUpload}>
</input>

这里可以选择上传文件的文件类型，在HTML标签中进行设定，这样避免上传一些不合法的文件或者CSRF攻击。这个属性在FF和chrome中有效。文件类型的验证最好在上传后或者JS代码进行二次验证。

值	描述
audio/*	接受所有的声音文件。
video/*	接受所有的视频文件。
image/*	接受所有的图像文件。
MIME_type	一个有效的 MIME 类型，不带参数。

可以查看文章：

https://blog.csdn.net/u013379933/article/details/77119796
http://www.iana.org/assignments/media-types/

function handleUpload(event) {
  const file = event.target.files[0];
  // 获取上传的文件数组的第一个文件
  if (file.size) {
    // 首先判断文件是否有内容
    let reader = new FileReader();
    reader.readAsText(file);
    // 按照text文件进行读取文件
    reader.onload = (resultFile) => {
      let pointsTxt = resultFile.target.result;
      console.log(pointsTxt);
      // 继续处理，显示在界面上或者其他方式
    };
  }
}

这里的关键就是FileReader，可以查看标准的解释

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

FileReader 对象说明

1、作用：可以使用 JS 异步读取本地文件

// 创建对象
let reader = new FileReader();
// 获取本地文件两种情况：input 元素对应的 FileList 对象；拖放操作生成的 DataTransfer 对象；
const file = event.target.files[0];
// 将本地文件放在对象中(传入的对象是一个Blob对象)
reader.readAsText(file);

// 读取过程是异步的，所以有不同的状态码(类似于AJax)

属性（只读）

FileReader.error
// 出错时的属性
FileReader.readyState
// 上传过程属性，012
FileReader.result
// 上传结果

常用事件

onabort 中断上传事件
onerror 错误上传事件
onload 上传完成事件(最常用)
onprogress 上传过程中事件

方法：将Blob对象按照不同的方式进行读取；在事件 FileReader.onload = function(event){ event.targte.result } 中进行获取转化后的文本。

这里将一个 markdown 文件以四种方式进行上传

FileReader.readAsArrayBuffer()

开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。ArrayBuffer 类型化数组，类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式的背景下诞生的。

FileReader.readAsBinaryString()

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

FileReader.readAsDataURL()

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

FileReader.readAsText()

开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以表示所读取的文件内容。这是最常用的txt上传数据类型。