場景: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({ }) }
示例:
