思维流程图
弹出文件选择器
- 通过ref获取input的DOM对象 并直接触发click事件弹出选择框
- input的type为file用于向服务器上传文件。它会让用户选择一个或多个文件,然后将文件传送到指定的服务器上
accept=".xlsx, .xls"只接收以.xlsx, .xls结尾的文件
input的change事件表示:当用户显式提交改变时,会触发
change
事件。
根据接口文档封装接口uploadExcel(data)并导入vue文件使用,event是input的change传的,event里面的target事件对象有个files【0】,files.length > 0表示文件大于0就上传,不大于0就没有文件上传, const data = new FormData()创建一个
空对象
实例,可以调用append()方法来添加数据,data通过参数传进接口uploadExcel(data),await下方一定是成功,通过自定义事件通知父组件上传成功,父组件监听并重新获取员工数据,然后关闭弹层清空文件选择器
失败的话catch捕获失败把成功放入try,失败清空文件选择器,使用dom对象把数据设置为空
this.$refs['excel-upload-input'].value = '',于是发现不论成功或者失败都要清空上传项,清空文件上传项,防止错误提示或选择不当导致文件名称,所以直接执行finally