【react+antd】前端讀取本地文件內容(txt)


場景:xxx血壓計測量數據之后,需要將測量的數據直接顯示在pc后台管理平台相應的表格中

准備:一台xxx血壓計,數據線,相關血壓計桌面軟件,pc

血壓計相關說明:測量時,將數據線和pc連接,打開血壓計桌面軟件,點擊連接設備,連接成功,開始測量,測量完成,桌面軟件會顯示相應的值:比如 收縮壓 舒張壓 心率 脈搏等,數據會存到本地的某個文件下,txt文本形式,文件位置可自定義

分析:1.交互

方案a:准備采用文件直接寫入的方式,將數據賦值到相應的表格中,模擬用戶自動選擇了某個文件夾

可行性:1.技術上可以實現,需要用到文件對象ActiveXObject,具有局限瀏覽器兼容性:IE特有,谷歌想要使用ActiveX控件需要安裝

IE-Tab-Multi-(Enhance)_v1.0.2.1.crx;安全性低,磁盤直接讀寫,容易注入垃圾數據,直接 無權限讀取,容易泄露資料;瀏覽器出於安全策略,也是不推薦,不允許這種無用戶主動觸發的交互行為;

結果:方案a不通過

方案b:用戶需要手動選擇某個文件,前端解析文件內容,賦值到pc端;和院方進行溝通之后,接受這種方式的交互

可行性:1.技術上可以實現,antd中的upload組件的事件beforeUpload,onChange,onChange先觸發,

beforeUpload可以拿到文件對象,需要注意 this的指向 ;
核心代碼
var reader = new FileReader();//創建文件對象
    reader.readAsText(file);//讀取文件的內容/URL
    let _this = this 
    reader.onload = function () {
        // 讀取完成--->回調函數,result:存儲文件內容,this.result訪問
        // 切割文本數據 操作內容
        let content = this.resule
        _this.setState({
            
        })
    }

  示例:

 

 

 

 

 

 

 

 

 


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM