界面中插入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上傳資料類型。
