Element-ui upload上传文件限制的解决方法

当使用 Element-ui 的 Upload 组件时，我们可能会遇到一些文件大小或文件数量的限制问题。这里提供一些解决这类问题的方法。

限制上传文件数量

我们可以使用 Element-ui 的 limit 属性来限制可以上传的文件数量。例如，以下代码将限制用户最多只能上传 3 个文件：

<el-upload
  :limit="3"
  action="/upload"
  :on-exceed="handleExceed"
>
  <el-button>上传文件</el-button>
</el-upload>

在这里，handleExceed 是一个方法，当达到上传文件数量上限时，它将被调用。我们可以在 handleExceed 中给出一个提示，告诉用户上传已达到上限。以下是一个示例代码：

methods: {
  handleExceed(files, fileList) {
    this.$message.warning(`最多只能上传 ${this.limit} 个文件！`);
  }
}

限制文件大小

Element-ui 的 Upload 组件有一个 before-upload 属性，我们可以使用它来检查用户上传的文件大小。以下是一个示例代码：

<el-upload
  :before-upload="handleBeforeUpload"
  action="/upload"
>
  <el-button>上传文件</el-button>
</el-upload>

在这里，handleBeforeUpload 是一个方法，它将在用户上传文件之前被调用。我们可以在这里检查文件的大小，如果文件大小超过限制，我们要显示一个提示信息，阻止文件上传。以下是一个示例处理程序：

methods: {
  handleBeforeUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 2; // 判断文件大小是否小于 2MB
    if (!isLt2M) {
      this.$message.error('上传文件大小不能超过 2MB!');
      return false;
    }
    return true;
  }
}

在这个示例中，我们检查用户上传的文件是否小于 2MB，如果大于 2MB，我们将显示一条错误信息，并阻止文件上传。

组合限制数量和大小

我们可以结合两个示例，使用 limit 属性来限制上传文件的数量，并在 before-upload 中检查文件的大小。以下是一个组合示例代码：

<el-upload 
  :limit="3"
  :before-upload="handleBeforeUpload"
  action="/upload"
  :on-exceed="handleExceed"
>
  <el-button>上传文件</el-button>
</el-upload>

在这里，我们限制用户只能上传 3 个文件，并在 handleBeforeUpload 方法中检查文件大小是否超过限制。如果用户上传的文件数量超过了 3 个，我们将调用 handleExceed 方法，并显示一条警告消息。

以上就是限制 Element-ui Upload 组件文件大小和文件数量的解决方法。如果你遇到了这样的问题，希望这些解决方案可以帮助你。