破解难题：探究Element UI中El-Upload取消自动上传后Before-Upload如何实现文件校验

2023-10-23 14:07:51

缘起：问题的提出

在使用Element UI框架开发前端项目时，我们经常会遇到文件上传的需求。Element UI提供了功能强大的El-Upload组件，可以轻松实现文件上传。但是，在某些情况下，我们需要取消El-Upload的自动上传功能，以实现更多的自定义控制。例如，我们需要在上传文件之前进行一些额外的处理，比如文件格式校验、文件大小限制等。此时，我们就需要用到El-Upload的Before-Upload事件。

然而，当我们取消了El-Upload的自动上传功能后，Before-Upload事件却失效了。这意味着我们无法在文件上传之前进行任何处理。这显然不是我们想要的结果。

抽丝剥茧：失效的根源

为了解决这个问题，我们需要先弄清楚Before-Upload事件失效的原因。经过一番调查，我们发现，Before-Upload事件失效是因为El-Upload组件在取消自动上传后，就不再触发input元素的change事件。而Before-Upload事件是绑定在input元素的change事件上的。因此，当input元素不触发change事件时，Before-Upload事件也就不会被触发。

拨云见日：解决方案

既然我们已经找到了Before-Upload事件失效的原因，那么解决办法也就呼之欲出了。我们需要在取消El-Upload自动上传后，手动触发input元素的change事件。这样，Before-Upload事件就可以正常触发了。

具体做法如下：

在El-Upload组件上添加一个ref属性，以便我们可以获取到El-Upload组件的实例。
在El-Upload组件的mounted生命周期钩子中，使用this.$refs.upload.uploadRef.input.click()方法手动触发input元素的change事件。
在Before-Upload事件中，就可以对文件进行校验了。

实践验证：一试便知

为了验证解决方案的有效性，我们编写了一个简单的示例代码：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :auto-upload="false"
    :before-upload="beforeUpload"
  >
    <el-button>选择文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:3000/upload'
    }
  },
  methods: {
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 2) {
        this.$message.error('文件大小不能超过2MB');
        return false;
      }
      return true;
    },
    mounted() {
      this.$refs.upload.uploadRef.input.click();
    }
  }
}
</script>

在这个示例代码中，我们使用了El-Upload组件，并取消了自动上传功能。在Before-Upload事件中，我们对文件的大小进行了校验。如果文件大小超过2MB，则会弹出错误提示，并阻止文件上传。在mounted生命周期钩子中，我们手动触发了input元素的change事件，以便Before-Upload事件可以正常触发。

运行这个示例代码，我们可以看到，当我们选择一个大于2MB的文件时，会弹出错误提示，并且文件不会被上传。这说明我们的解决方案是有效的。