看antd文档，刚开始我用得beforeUpload来实现，勉强能完成我想要的功能，但是流程上不完美，需要先选择了文件，才能弹出确认框，但是我的确认框其实跟文件没有关系，我想要先弹确认框再打开文件选择弹框。

继续搜索，发现一个解决思路是使用两个按钮叠加，上层的普通按钮点击后弹出确认框，点了确认后再使用ref的click来触发upload组件内部的按钮点击事件，但是这个方案有一些瑕疵，比如我还得使用css将两个按钮叠加起来，还需要想办法阻止下层按钮的点击事件。

继续看antd文档，发现openFileDialogOnClick这个属性能解决我的问题。

初始状态下openFileDialogOnClick设置为false，给upload组件里的button添加点击事件，在点击事件里去弹出确认框，在确认框里点了确定，我们在将openFileDialogOnClick设置为true，然后我们在用ref来触发upload，文件选择框就可以打开了。

需要注意的是，当我们使用ref触发click的时候，原来在button上添加的点击事件也会触发，所以当openFileDialogOnClick为true的时候，确认框依旧会弹出来，这时候需要加判断，只有当openFileDialogOnClick为false的时候才弹出确认框。文件上传结束后，还要记得将openFileDialogOnClick恢复初始值false。

<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelSyncToUser"@change="handleImportExcelSyncToUser" accept=".xls" :openFileDialogOnClick="openFileDialogOnClick"><a-button ref="btn" type="primary" icon="import" @click="handleClick">考生基本信息导入</a-button></a-upload>

handleClick(){//当openFileDialogOnClick为false的时候，要弹出确认框if(!this.openFileDialogOnClick){this.getProjectName();}},getProjectName(){if(!this.projectId){this.$message.error("请选择项目!");return}let projectName = '';let url = this.url.queryById+'?projectId='+this.projectId;getAction(url).then(res => {if (res.success) {projectName = res.result.name;this.$confirm({title: '导入确认',content: '请确定项目名称：'+projectName,okText: '确定导入',cancelText: '取消导入',onOk: () => {// 上传前的事件处理完成后，触发上传文件的事件this.confirmImport();},onCancel: () => {this.openFileDialogOnClick = false;return},});}else{this.$message.warning(res.message)}})},
confirmImport(){this.$confirm({title: '考生基本信息导入确认',content: '每次导入会覆盖原来的数据，确定导入吗？',okText: '确定导入',cancelText: '取消导入',onOk: () => {this.openFileDialogOnClick = true;setTimeout(()=>{// 点击按钮，打开选择文件的对话框this.$refs["btn"].$el.click();},50)},onCancel: () => {this.openFileDialogOnClick = false;return},})},

我这个案例里弹了两次确认框。