如何监测input type=file时 关闭弹出的选择文件窗口 的事件

Question

在开发时，遇到一个问题。

做文件上传优化的时候，需要在文件点击上传后将按钮变为 loading 状态。

最开始设计时想着在点击上传按钮时

改变 loading 的状态

等文件传输完再将 loading 状态改变回来

但是发现在文件选择时 点击 取消 或者直接 关闭 弹出的选择窗口时

按钮一直保持为loading状态变不回来了

搜了一下检测 这个事件的检测方法

也没有搜出来

所以来这里请教一下各位大神

代码如下

vue + element

html代码
<template>
  <div id="upload">
    <el-button size="mini" type="primary" @click="upload">上传</el-button>
    <div v-show="false">
      <input ref="upFile" @change="getFile" type="file"/>
      <button @click="submit" type="submit">提交</button>
    </div>
  </div>
</template>

methods: {
      upload() {
        this.loading = true;
        this.$refs['upFile'].click();
      },
      getFile(event) {
        this.file = event.target.files[0];
        console.log(this.file);
        this.submit();
      },
      submit() {
        this.$message.success('正在导入，请稍后……');
        this.$emit('changeMouse');
        //创建 formData 对象
        let formData = new FormData();
        // 向 formData 对象中添加文件
        formData.append('excelFile', this.file);
        this.$http.post(this.url, formData).then((res) => {
          if (res.data.resultCode === 1) {
            this.$message.success("导入成功！");
          } else if (res.data.resultCode === 2) {
              this.$message.error("导入失败！");
              location.href = 'api/file/downloadFile?fileName='+res.data.resultMsg+"&filePath="+res.data.resultMsg
          } else {
            this.$message.error(res.data.resultMsg);
          }
          this.loading = false;

        }).catch(res=>{
         this.loading = false;
        }).finally(() => {
          this.$refs['upFile'].value = '';
          this.loading = false;
        })
      },
    }

Answer 1