文件组件全局导出重复点击处理

在文件上传组件中，处理重复点击事件的方法有很多种。这里提供一种常见的方式：

在组件中，可以定义一个变量 `isUploading` 来表示当前是否正在上传文件。在上传文件前，先判断这个变量的值。如果为 `true`，说明正在上传文件，则不执行上传操作；如果为 `false`，则将 `isUploading` 设为 `true`，然后执行上传操作。上传完成后，再将 `isUploading` 设为 `false`，以便下一次上传。

示例代码如下：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUploading: false
    };
  },
  methods: {
    async uploadFile() {
      if (this.isUploading) {
        return; // 如果正在上传文件，则不执行上传操作
      }
      const file = this.$refs.fileInput.files[0]; // 获取上传的文件
      if (!file) {
        return; // 如果没有选择文件，则不执行上传操作
      }
      this.isUploading = true; // 将 isUploading 设为 true
      try {
        // 执行上传操作
        await this.$http.post('/api/upload', { file });
      } catch (error) {
        console.error(error);
      } finally {
        this.isUploading = false; // 将 isUploading 设为 false
      }
    }
  }
};
</script>

在这个示例中，`isUploading` 初始值为 `false`。当用户选择文件并触发上传事件时，会调用 `uploadFile` 方法。首先判断 `isUploading` 的值，如果为 `true`，则不执行上传操作；否则，将 `isUploading` 设为 `true`，然后执行上传操作。上传完成后，无论成功或失败，都会将 `isUploading` 设为 `false`，以便下一次上传。