当文件上传遇到全屏

当页面全屏时，点击上传文件，会导致全屏退出，这是部分浏览器的一种安全策略导致的，我们可以在文件选择/取消后重新恢复全屏。

解决方案如下

// html
<input ref="uploadImg" type="file" accept=".png,.jpg" v-show="false">
<el-button @click="uploadImg">上传</el-button>

// js
import screenfull from "screenfull";
export default {
  data() {
    return {
      uploadTriggle: false,
    }
  },
  methods: {
    uploadImg() {
      if (screenfull.isFullscreen) {
        this.uploadTriggle = true;
      }
      setTimeout(() => {
        this.$refs.uploadImg.click();
        const onFocus = () => {
          window.removeEventListener('focus', onFocus);
          document.body.addEventListener('mousemove', onMouseMove);
        };
        const onMouseMove = () => {
          document.body.removeEventListener('mousemove', onMouseMove);
          if (!screenfull.isFullscreen && this.uploadTriggle) {
            screenfull.toggle(); // 切换全屏状态
            this.uploadTriggle = false;
          }
        }
        window.addEventListener('focus', onFocus);
      }, 200);
    },
  },
}