el-upload限制上传文件大小,限制上传图片尺寸,限制上传文件名称合集

前言:在项目中经常会遇到文件上传的时候限制上传文件大小,限制上传文件格式,限制上传的图片尺寸,今天做一下上传总结。

文章目录

• 一、限制上传文件大小

• 二、限制上传图片尺寸

• 三、限制上传文件格式

一、限制上传文件大小

  
        
   


//主要是在上传之前的方法里面进行操作,maxSize为自定义的文件格式大小
  beforeUpload(file) {
      if (file.size / 1024 / 1024 > this.maxSize) {
        this.$message.error({
          message: `上传文件大小不能超过${this.maxSize}M!`,
        });
        return false;
      }
    }

二、限制上传图片尺寸

 
        
   


//主要是在上传之前的方法里面进行操作,imageSizeType是定义的上传文件大小的类型,可自行修改或不使用
  beforeUpload(file) {
       // 限制图片的大小
      let isSize;
      if (this.imageSizeType && this.imageSizeType == 0) {
        isSize = new Promise(function (resolve, reject) {
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {
            let valid = img.width == 48 && img.height == 48;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message.error("上传图片尺寸只能是 48*48 px !");
            return Promise.reject();
            return false;
          }
        );
        return isSize;
      } else if (this.imageSizeType && this.imageSizeType == 1) {
        isSize = new Promise(function (resolve, reject) {
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function () {
            let valid = img.width == 1000 && img.height == 800;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            this.$message.error("上传图片尺寸只能是 1000*800 px !");
            return Promise.reject();
            return false;
          }
        );
        return isSize;
      }
    },
    }

!!! 注意此处限制上传图片尺寸有一个坑,因为这是封装的一个upload上传组件,可多处使用,由于每个地方可能限制的图片尺寸不同,刚开始是从父组件把限制的尺寸大小传给子组件,这样一个方法就搞定,后来发现是没有效果的,需要有一个尺寸类型就写一个if条件来判断,不知道因为什么,如果不封装组件这个坑就不存在。

三、限制上传文件类型

      
          

          点击上传或者将文件拖放此区域任意位置
          
          
          
上传文件
          

          文件必须为.zip .rar .xlsx 类型
          
       

    // 上传之前
      handleBeforeUpload(file) {
        let fileName = file.name
        let pos = fileName.lastIndexOf('.')
        let lastName = fileName.substring(pos, fileName.length)
        if (
          lastName.toLowerCase() !== '.zip' &&
          lastName.toLowerCase() !== '.rar' &&
          lastName.toLowerCase() !== '.xlsx'
        ) {
          this.$message.error('文件必须为.zip .rar .xlsx类型')
          this.$refs.uploadFile.clearFiles()
          return false
        }
      },

也可以直接使用官方文档使用的 直接限制上传类型，最简单，但是会有局限性，因为在选择文件时也可以点击选择全部文件，这样限制类型就不会生效（accept只针对测试宽松的情况，测试严格就不能偷懒了）

---