element ui 文件上传前的限制

除了获取上传文件后缀名称的函数方法这个方法之外 其他都要放在element ui 上传组件的before-upload方法里

格式限制

获取上传文件后缀名称的函数方法

getFileType (name) {
    let startIndex = name.lastIndexOf(".")
    if (startIndex !== -1) {
     return name.slice(startIndex + 1).toLowerCase()
    } else {
     return ""
    }
   },

let suffix = this.getFileType(file.name) //获取文件后缀名
    let suffixArray = ["jpg", "png", "jpeg", "gif", "pdf", "ceb", "word", "excel", "ppt"] //限制的文件类型，根据情况自己定义
    if (suffixArray.indexOf(suffix) === -1) {
     this.$message({
      message: "附件材料格式为jpg/png/jpeg,pdf/ceb,word/excel/ppt",
      type: "error",
      duration: 2000
     })
    }

大小限制

const sizeCheck = file.size / 1024 / 1024 < 20;
    if (!sizeCheck) {
     this.$message.error("单个附件材料大小不能超过 20MB!");
    }
    return sizeCheck;

如果上传的是图片 对图片进行大小比例限制

const isSize = new Promise((resolve, reject) => {
     const width = 4;
     const height = 3;
     const _URL = window.URL || window.webkitURL;
     const img = new Image();
     img.onload = () => {
      // 限制宽高必须为 18*18 像素
      //const valid = img.width == width && img.height == height && img.width === img.height;
      // // 限制宽高必须为 1:1 比例
      //const valid = img.width == img.height;
      //按照一定比例 本例子为4:3
      const valid = img.width / img.height === width / height
      // // 限制必须为竖屏图片(宽必须小于高)
      // const valid = img.width < img.height;
      // // 限制必须为横屏图片(宽必须大于高)
      // const valid = img.width > img.height;
      valid ? resolve() : reject();
     };
     img.src = _URL.createObjectURL(file);
    }).then(
     () => {
      return file;
     },
     () => {
      this.$message.error('上传图标尺寸限制为4*3比例');
      return Promise.reject();
     },
    );
    return isSize