必须在点击上传按钮后、弹出文件选择框前校验是否已选文件，通过自定义按钮调用隐藏input.click()前判断files.length，为0则弹窗提示；因change和before-upload均需实际选中文件才触发，无法捕获取消操作。
点击上传按钮但未选文件时如何触发弹窗
直接监听 upload 组件的上传动作不行——因为原生 input[type="file"] 不会触发 click 以外的事件，且用户没选文件时，before-upload 或 on-change 根本不执行。必须把“判断是否已选文件”这步提前到弹出文件选择框之前。
用自定义按钮 + 隐藏 input 触发校验逻辑
核心思路是：不让用户直接点 input，而是点一个你可控的按钮，在点击回调里先做判断，再决定是否调用 input.click()。
- 把
<input type="file" id="hiddenFile" style="display:none">放在页面任意位置（建议靠近表单） - 写一个可见按钮，比如
<button>上传文件</button> - 在
handleUploadClick中检查this.$refs.hiddenFile.files.length === 0，为真就this.$message.warning('请先选择文件')并 return - 否则才执行
this.$refs.hiddenFile.click()
Element UI / Ant Design 的 upload 组件怎么插入手动校验
这些组件内部封装了 input[type="file"]，不能直接访问 DOM，但提供了 ref 和内部方法入口：
- 给
<upload ref="upload"></upload>加 ref，确保组件已挂载 - 调用
this.$refs.upload.$refs['upload-inner'].handleClick()（Element UI）或this.$refs.upload.handleStartUpload()（Ant Design Vue）可模拟点击 - 关键：不要在
before-upload里做“未选文件”提示——它只在真有文件时触发；必须在外层按钮点击时判断 - 如果用了
auto-upload=false，还要注意fileList是空数组而非null，判断条件应为!this.fileList || this.fileList.length === 0
为什么不能靠 change 事件拦截“未选文件”
因为 change 只在用户真正选中文件后才触发；如果用户打开文件对话框又点了取消，change 根本不会发生，也就没有机会弹窗。这个行为是浏览器原生限制，无法通过事件监听补救。
所有可靠方案都必须把判断时机卡在 click() 调用前——也就是用户按下上传按钮、但文件对话框尚未弹出的那一帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
