el-upload 怎样才能在图片上传之前判断图片的宽度如果大于20才能上传

在ECharts图表中，`el-upload` 是 Element UI 提供的一个文件上传组件，如果你想在图片上传前检查图片尺寸，你可以利用它的钩子函数和前端的图片处理技术来实现。以下是一个简单的步骤：

1. 首先，在`el-upload` 的配置选项中，添加一个 `beforeUpload` 回调函数，这个函数会在上传文件前被触发。

<el-upload
  action="your-upload-url"
  :on-exceed="handleExceed" // 当超过限制时触发的回调
  :before-upload="beforeImageUpload"
>
  <img v-if="previewFile" :src="previewFile.url" style="max-width: 100%; max-height: 100%;" />
  <i v-else class="el-icon-plus"></i>
</el-upload>

methods: {
  beforeImageUpload(file) {
    if (file.type === 'image/jpeg' || file.type === 'image/png') { // 检查文件类型是否是图片
      const reader = new FileReader();
      reader.onload = function (e) {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.onload = () => {
          if (img.width > 20) {
            return true; // 图片宽度小于20，则返回true允许上传
          } else {
            this.$message.error('图片宽度不能超过20px，请重新选择。');
            return false; // 否则返回false阻止上传
          }
        };
      };
      reader.readAsDataURL(file);
    } else {
      this.$message.warning('只支持jpg和png格式的图片上传。');
      return false;
    }
  },
  handleExceed(files, fileList) {
    this.$message.warning(`当前只能上传${this.uploadLimit}张图片`);
  }
}

在这个例子中，我们创建了一个 `FileReader` 来读取文件内容，并在图片加载完成后检查其宽度。如果宽度超过了20px，就允许上传；否则显示错误消息并阻止上传。