一、前言
最近工作原因，需要前端處理導入的文件（txt、csv），並將內容顯示在頁面，問了好多網友，解決方案是有，但是並不是我想要的，所以就決定造一個輪子。
二、如何使用
1、在頁面中引入文件
我使用的是ES6規範，如果你的環境只能支持CommonJs規範，那你可以自行微調，修改文件導出方式即可
2、實例化：
1 var reader = new SmartReader(input);
ps：input是上傳按鈕這個Element，它像下面這樣：
1 ...
2 <input type="file" id="smartUpload" @change="yourHandle" accept=".txt,.csv"/>
3 ...
你可以像下面這樣取得這個input：
1 1、使用原生接口
2 var input = document.getElementById("smartUpload");
3 2、使用jquery
4 var input = $("#smartUpload");
3、啓動工具，進行讀取，獲取內容：
1 reader.start().then(res => {
2
3 ...
4
5 // res便是解析到的結果
6 })
三、設計思想
工具本身並不複雜，核心部分是對Web API的封裝，介於瀏覽器環境不同，我使用了loader（加載器）的設計，即實際處理是由loader進行的，如果當前的loader無法正常工作，那我只需要換一個loader即可，就不用寫一堆if else。因爲我的需求是讀取文件，根據文件類型不同，又有txt、csv等格式，如果單純的寫if else，代碼可維護性非常差，如果後面又增加了一種類型，那就很難受了。工具像一個黑盒，對外暴露了start函數，輸入是一個Element元素，輸出是什麼要取決於loader。我目前實現了兩種loader，一種是支持主流瀏覽器的BasicLoader，一種是支持IE的IELoader，支持的文件類型目前只有txt。
工具的工作流程是這樣的：接收到輸入後，根據環境加載不同的loader，然後將輸入傳遞給loader。loader接收到文件後，會初始化“引擎”，也就是我們的Web API，接着根據文件類型，選取不同的規則進行解析，最後將結果返回。
對於主流瀏覽器，使用FileReader進行文件的處理，實例化FileReader後，使用readAsText()方法進行讀取，但要注意一點，方法是異步的，來看看MDN上的描述：
所以，我將這個方法封裝爲一個Promise，方便使用。
IE比較特殊，使用了另外的方法解析，大傢俱體看代碼吧，也沒什麼好多說的。
四、案例
我是在Vue中使用，但是原生的上傳實在是醜陋，所以就寫了一個上傳的組件，並整合了這個工具，大家有興趣就看看吧：
五、其它
代碼已上傳至GitHub，如果你覺得還不錯，幫我點個star吧嘻嘻。
https://github.com/Thinker-Mars/Demo/tree/master/smartUpload
