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>