如何弹出文件选择器并且选择文件？

 思维流程图

 弹出文件选择器

1.  通过ref获取input的DOM对象 并直接触发click事件弹出选择框
2. input的type为file用于向服务器上传文件。它会让用户选择一个或多个文件，然后将文件传送到指定的服务器上

3. 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

总结：，文件弹框使用dom的click，文件选择监听的input的change事件，调用接口之前判断文件长度大于0，FormData类型添加进去，无论成功或失败都在finally中清空，成功是时候关闭了弹层，父组件也监听事件，重新加载数据。以上完成了上传功能