input file 文件框“取消”按钮事件

使用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>