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

一、限制上传文件大小

  <el-upload
        action="javascript:void(0)"
        list-type="picture-card"
        :show-file-list="false"
        :multiple="multiple"
        :before-upload="beforeUpload"
        :http-request="onRequest"
      >
        <i class="el-icon-plus"></i>
   </el-upload>


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

二、限制上传图片尺寸

 <el-upload
        action="javascript:void(0)"
        list-type="picture-card"
        :show-file-list="false"
        :multiple="multiple"
        :before-upload="beforeUpload"
        :http-request="onRequest"
      >
        <i class="el-icon-plus"></i>
   </el-upload>


//主要是在上传之前的方法里面进行操作,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条件来判断,不知道因为什么,如果不封装组件这个坑就不存在。

三、限制上传文件类型

      <el-upload      
        ref="uploadFile"
        :action="`${baseUrl}/invoiceSearch/uploadZip`"
        :before-upload="handleBeforeUpload"
        class="upload-demo"
        :data="{
         pid: form.methods,
         }"
         drag
         :headers="uploadHeader"
         :on-error="handleError"
         :on-success="handleUploadSuccess"
         :show-file-list="false"
          >
          <div class="upload-tips">
          点击上传或者将文件拖放此区域任意位置
          </div>
          <i class="el-icon-upload"></i>
          <div class="upload-img">上传文件</div>
          <div class="upload-desc">
          文件必须为.zip .rar .xlsx 类型
          </div>
      </el-upload> 

    // 上传之前
      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只针对测试宽松的情况，测试严格就不能偷懒了）

---