Vue+elementUI中的el-upload实现上传文件给后端，限制上传文件的格式、文件的大小、文件的数量，将表单和Excel文件一起提交给后端

在Vue中使用elementUI的<el-upload>组件实现文件上传，并对文件格式和大小进行限制，可以通过设置<el-upload>组件的before-upload钩子函数来实现。以下是一个简单的例子：

<template>
  <el-upload
    class="upload-demo"
    drag
    action="http://example.com/upload" // 这里应该是你的后端接口地址
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    beforeUpload(file) {
      const allowedTypes = ['image/jpeg', 'image/png']; // 允许的文件类型
      const allowedSize = 2 * 1024 * 1024; // 允许的文件大小，这里是2MB
 
      if (!allowedTypes.includes(file.type)) {
        this.$message.error('只能上传JPEG或PNG格式的图片!');
        return false;
      }
 
      if (file.size > allowedSize) {
        this.$message.error('文件大小不能超过2MB!');
        return false;
      }
 
      // 通过时执行上传操作
      return true;
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功后的处理逻辑
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      // 文件上传失败后的处理逻辑
      console.error('Error while uploading file:', err);
    },
  },
};
</script>

在这个例子中，beforeUpload方法会在文件被上传之前调用，用于检查文件类型和大小。如果文件不符合规定的格式或大小，它将不会被上传，并且用户将会看到一个错误提示。如果文件通过了检查，它将会被上传到指定的后端接口地址。上传成功或失败时，会调用handleSuccess或handleError方法来处理响应。