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

<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>