【金秋打卡】第9天 全新升级，基于Vue3最新标准，打造后台综合解决方案之文件选择之后的数据解析处理

课程名称：全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节：7-7：业务落地：文件选择之后的数据解析处理

课程讲师：Sunday

课程内容：

目标：在excel的上传的实现，选择文件，分析数据上传分析的数据。
核心点： 选中文件之后，解析 excel 数据

解析的方式根据我们的导入形式的不同也可以分为两种：

1. 文件选择（选择隐藏域）导入

2. 文件拖拽导入

实现步骤：

1. 解析 excel 数据我们需要使用 xlsx ，所以我们需要先下载它 npm i xlsx

2. 实现的具体步骤：

   a. 注册上传前回调和成功回调的方法。beforeUpload onSuccess
   b.点击上传时候触发的事件。handleUpload handleChange
   c. 触发上传事件前
   c.触发上传事件。
   d.读取数据（异步）
   - 获取解析到的数据
   - 利用 XLSX 对数据进行解析
   - 获取第一张表格(工作簿)名称
   - 只读取 Sheet1（第一张表格）的数据
   - 解析数据表头
   - 解析数据体
   - 传入解析之后的数据
   - loading 处理
   - 异步完成
   e .根据导入内容生成数据

   3. getHeaderRow 为 xlsx 解析表头数据的通用方法，直接使用即可

   4. 在 import 组件中传入 onSuccess 事件，获取解析成功之后的 excel 数据

课程收获：

谢谢老师，讲的非常细致，很容易懂。这一节学的是左侧栏用户下的员工管理中excel上传文件的选择文件上传的具体实现过程和步骤。主要的核心点在于数据分析部分。主要是借助第三方的工具库xlsx的对表格分析方法，按照固定的格式去创建表格，然后拿到利用第三方工具库的API分析得到的表格内容去转换成我们需要的数据格式进行回显和上传。这种方法比较特殊，在未来我们实际的项目中肯定会遇到的，所以还是非常实用。

课程截图：