记录一下在工作期间的一个功能需求(在线课件系统)
功能整体不复杂,对前端来说主要的难点在于数据的转化处理,所以前期花了2天时间专门和端对接转化协议,下面从整个操作流程来详细记录。
1、上传ppt。
使用了el-upload组件和el-progress组件。
上传组件监测:
- before-upload 用于判断文件大小和文件类型(常用的MIME类型https://www.cnblogs.com/anllin/articles/1994485.html)
- on-success 监测上传成功
- on-error 监测上传失败
- on-progress 监测上传进度,用于显示
用office365和office导入的pptx文件无法获取到文件类型,改成通过获取文件名字后缀判断是否符合导入文件类型
const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
注意文件后缀大小写兼容
el-progress 进度条组件使用的环形,内部有文字展示,在低版本(v2.4.8之前)内部文字会显示成叉叉icon,高版本不会有这个Bug
2、转换数据
上传完以后,等待端转ppt,然后返回,前端开始数据转换
需要枚举的数据较多,所以拆分了多个方法,分2类,一类是类型的判断处理、另一类是枚举数据处理。
在处理公式的时候,涉及到了异步,使用async/await和promise处理,其中遇到2个坑
1、加了async的方法,返回值始终是一个promise,用resolve(‘return的值’)处理以后,就可以获取到想要的返回值了
2、一开始用的forEach循环,循环里的await不会同步,改成ES6的for...of循环就行了。