Element-plus upload上传限制文件类型，文件大小

html部分：

        

<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    :http-request="uploadFile"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="message"
    :before-remove="beforeRemove"
    :limit="1"
    :on-exceed="handleExceed"
  >
    <el-button type="primary">选择文件</el-button>
    <template #tip>
      <div class="el-upload__tip">
        支持格式：zip,ppt,pdf,word,excel,csv,png,jpg，单个文件不能超过20MB
      </div>
    </template>
  </el-upload>
</template>

JS部分：

        

// 上传文件
const uploadFile = async (file) => {
  const allowedFileTypes = [
    "application/vnd.ms-excel", // Microsoft Excel 表格
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", //xlx
    "application/zip", // Zip files
    "application/vnd.ms-powerpoint", // PowerPoint files
    "application/pdf", // PDF files
    "application/msword", // Word files
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", //docx
    "text/csv", // CSV files
    "image/png", // PNG images
    "image/jpeg", // JPG images
  ];
  const maxSize = 20 * 1024 * 1024; // 20MB
  if (file) {
    const options = {
      meta: { temp: "demo" },
      mime: "json",
      headers: { "Content-Type": "text/plain" },
    };
    const isLt20M = file.file.size <= maxSize;
    if (!isLt20M) {
      ElMessage({
        type: "error",
        message: "文件大小超过20MB",
      });
      fileList.value = [];
      return false; // 阻止文件上传
    }

    if (!allowedFileTypes.includes(file.file.type)) {
      ElMessage({
        type: "error",
        message: "文件格式错误",
      });
      fileList.value = [];
      return false; // 阻止文件上传
    }

    try {
      //向后端上传文件
      const result = await client.value.put(file.file.name, file.file, options);
      oosurl.value = result.url;
    } catch (e) {
      // Handle the error
    }
  } else {
    ElMessage.warning({
      message: "No file selected",
      type: "warning",
    });
  }