使用input type="file"上传文件，触发它的点击事件后，会吊起系统的文件选择器，这个时候如果点击取消按钮，或者x关闭弹窗，原生的input标签是无法监听取消事件的。并且取消也不会触发input的change事件，这种情况下该怎么处理？
The focus event will be executed before the change event.
So I need to use setTimeout to make the focus method execute later than the change method.
文件打开对话框弹出后，当前页面失去焦点，当文件选择对话框关闭（无论是确定还是取消），页面将重新获取焦点。可以绑定页面获取焦点事件，判定用户是否取消了文件选择。
需要注意的是，浏览器页面获取焦点事件早于 onchange 事件约20毫秒，需要页面绑定的事件滞后执行，使用 setTimeout 即可。
可以通过采取为当前window添加focus事件的方式来模拟取消事件，只要控制这个focus事件在change事件之后执行，就可以通过设置一个变量和setTimeout方法实现
<template>
<input type="file" v-show="false" ref="input" @change="onSelectFile">
<button class="btn" @click="onUploadClicked">选择文件</button>
</template>
<script>
let fileCancel = false
onUploadClicked () {
fileCancel = true
// 触发点击事件
this.$refs.input.click()
// 模拟取消事件
window.addEventListener(
'focus',
() => {
setTimeout(() => {
if (fileCancle) {
// 取消逻辑处理
console.log('取消了，我要处理一些事情了')
}
}, 300)
},
{ once: true }
)
},
onSelectFile (e) {
fileCancel = false
// 正常逻辑处理
console.log('选中了文件，我要处理一些事情了')
console.log(e.target.files[0]);
}
</script>
