解决element-ui第二次上传时on-change事件没有执行的问题

Element UI 中的文件上传组件在某些场景下，如用户连续多次快速点击上传按钮，可能会导致第二次或后续的 onChange 事件不触发。这是因为 Vue 的事件系统默认不会立即更新 DOM，如果操作频繁，特别是涉及到状态改变的，可能会存在“队列”现象。

解决这个问题的一个常见方法是在 `before-upload` 或者 `handle-change` 回调中添加一些延时处理，确保在所有之前的请求完成后再触发新的上传。例如：

<el-upload
  :action="uploadUrl"
  :on-change="handleChange"
  :before-upload="beforeUpload"
>
  <el-button slot="trigger">选择文件</el-button>
</el-upload>

<script>
export default {
  methods: {
    handleChange(file) {
      this.handleFileChange(file);
    },
    
    beforeUpload(file) {
      // 如果有并发限制，可以使用 Promise.all 或 async/await 来等待上一次请求完成
      return new Promise((resolve) => {
        if (this.uploading) {
          resolve(false); // 禁止当前文件上传，直到上次请求结束
        } else {
          this.uploading = true;
          resolve();
        }
      });
    },
    
    handleFileChange(file) {
      this.uploading = false; // 设置为false，表示开始处理新上传
      // ... 其他处理逻辑
    },
  }
}
</script>

在这个例子中，我们通过 `beforeUpload` 函数检查是否已经有上传任务在进行，如果有，就阻止当前文件的上传并返回假值。当上一个文件上传完成后，`handleFileChange` 会被正常调用。