element-plus el-upload 控制上传文件类型

要控制上传文件类型，可以使用el-upload的file-list属性，它是一个数组，用于存储已上传的文件列表。通过监听before-upload事件，可以在上传之前对文件进行检查和筛选。

示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFiles">上传到服务器</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      // 判断文件类型是否符合要求
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJpgOrPng) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false;
      }

      // 添加到fileList中
      this.fileList.push(file);
      return false;
    },
    onSuccess() {
      this.$message.success('上传成功');
    },
    onError() {
      this.$message.error('上传失败');
    },
    uploadFiles() {
      // 执行上传操作
      this.$refs.upload.submit();
    }
  }
};
</script>

在before-upload事件中，我们检查了文件类型和大小，如果符合要求，则将文件添加到fileList中。在上传之前，我们可以通过遍历fileList来控制上传的文件类型。

另外，我们将auto-upload属性设置为false，这样选择文件后不会自动上传，而是需要手动调用submit方法上传文件。