课程章节:7-7:业务落地:文件选择之后的数据解析处理
课程讲师:Sunday
课程内容:
目标:在excel的上传的实现,选择文件,分析数据上传分析的数据。
核心点: 选中文件之后,解析 excel 数据
解析的方式根据我们的导入形式的不同也可以分为两种:
-
文件选择(选择隐藏域)导入
-
文件拖拽导入
实现步骤:
-
解析 excel 数据我们需要使用 xlsx ,所以我们需要先下载它 npm i xlsx
-
实现的具体步骤:
a. 注册上传前回调和成功回调的方法。beforeUpload onSuccess
b.点击上传时候触发的事件。handleUpload handleChange
c. 触发上传事件前
c.触发上传事件。
d.读取数据(异步)
- 获取解析到的数据
- 利用 XLSX 对数据进行解析
- 获取第一张表格(工作簿)名称
- 只读取 Sheet1(第一张表格)的数据
- 解析数据表头
- 解析数据体
- 传入解析之后的数据
- loading 处理
- 异步完成
e .根据导入内容生成数据-
getHeaderRow 为 xlsx 解析表头数据的通用方法,直接使用即可
-
在 import 组件中传入 onSuccess 事件,获取解析成功之后的 excel 数据
-
课程收获:
谢谢老师,讲的非常细致,很容易懂。这一节学的是左侧栏用户下的员工管理中excel上传文件的选择文件上传的具体实现过程和步骤。主要的核心点在于数据分析部分。主要是借助第三方的工具库xlsx的对表格分析方法,按照固定的格式去创建表格,然后拿到利用第三方工具库的API分析得到的表格内容去转换成我们需要的数据格式进行回显和上传。这种方法比较特殊,在未来我们实际的项目中肯定会遇到的,所以还是非常实用。