element 上传图片限制图片尺寸大小以及格式，贴源码，写的很清楚，没有精简代码，看不懂就算了，另一篇文章写的有如何上传步骤，这里只是部分代码，做完全限制

<el-upload
          v-if="aaa === true"
            class="avatar-uploader"
            :action="namepag()"
            list-type="picture-card" 
            :on-preview="handlePictureCardPreview" 
            :before-upload="beforeMasterPictureUpload"
            :on-change = "onChangeMaster"
            :on-exceed="OnExceed"
            :file-list="fileList"
            :limit="1"
            :on-remove="handleRemove"
            
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

上面是标签 下面是方法

namepag(){
      let bauit = this.$http.baseUrl
      // console.log(bauit)
      return bauit + "/zuul/order/file/updateFileList/file";
    },

// 主图上传成功
    handleMasterPictureSuccess(res, file) {
          this.dialogImageUrl = URL.createObjectURL(file.raw);
          console.log(this.dialogImageUrl)
          if (this.dialogImageUrl) {
            // this.$message('上传成功');
            this.$message({
          message: this.$t('Sellerbanner.Sellerbanner.Uploadsuccess'),
          type: 'success'
        });
          }
    },
    // 图片触发
    onChangeMaster(file, fileList){
        　let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
        　　if (existFile) {
                this.$utils.commonUtils.tip(this.$t('Sellerbanner.Sellerbanner.currentfile'),'error')
        　　　　fileList.pop()
        　　}
        　this.fileList = fileList
    },
    // 主图上传之前
    beforeMasterPictureUpload(file) {
      // console.log(file)
      let param = new FormData(); //创建form对象
      this.fileList.forEach(file => { 
            param.append('files', file.raw, file.raw.name); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上 
  　　}) 
      let config = {   //添加请求头
          headers:{'Content-Type':'multipart/form-data'}
      };
      // this.$api.generalize.uploading(param,config).then( res => {
      // const {data} = res;
      // this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
      // })

      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isname = new RegExp("[\u4E00-\u9FA5]+");
      if (isname.test(file.name)) {
        this.$message.error(this.$t('Sellerbanner.Sellerbanner.beChinese'));
            return false
          }
          let _this = this
          if (file.type.indexOf('image')<0) {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.isincorrect'));
            return false
          }
          if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error(this.$t('Sellerbanner.Sellerbanner.Uploadingimages'));
          }
      let a = this.bannerCur;
      switch(a){
        case '1':
        {
          if (this.bannerCur === '1') {
            this.isLt2M = file.size / 750 / 530 < 2;
            const isSize = new Promise(function(resolve, reject) {
            let width = 750;
            let height = 530;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
              if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            // const {data} = res;
            // this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
        case '2':
        {
          if (this.bannerCur === '2') {
            this.isLt2M = file.size / 220 / 170 < 2;
          const isSize = new Promise(function(resolve, reject) {
            let width = 220;
            let height = 170;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed1'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
        case '3':
        {
           if (this.bannerCur === '3') {
             this.isLt2M = file.size / 1180 / 140 < 2;
          const isSize = new Promise(function(resolve, reject) {
            let width = 1180;
            let height = 140;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed2'));
            return Promise.reject();
          });
          return isSize
           }
        }
        break;
        case '4':
        {
          if (this.bannerCur === '4') {
            this.isLt2M = file.size / 1190 / 240 < 2;
            const isSize = new Promise(function(resolve, reject) {
            let width = 1190;
            let height = 240;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = true || img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed3'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
        case '5':
        {
          if (this.bannerCur === '5') {
            this.isLt2M = file.size / 400 / 638 < 2;
          const isSize = new Promise(function(resolve, reject) {
            let width = 400;
            let height = 638;
            let _URL = window.URL || window.webkitURL;
            let img = new Image();
            img.onload = function() {
              let valid = img.width == width && img.height == height;
              valid ? resolve() : reject();
            }
            img.src = _URL.createObjectURL(file);
          }).then(() => {
            this.$api.generalize.uploading(param,config).then( res => {
            if(res.errorCode == '100200') {
                   const {data} = res;
                   this.dialogImageUrl = this.$utils.goodUtils.setObjSplit(data); // 主图 分隔符 | 格式传参
                   if (this.dialogImageUrl) {
                    this.$message({
                      message: '上传成功',
                      type: 'success'
                      });
                    }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
              }else{
                      this.$message({
                      message: '上传失败',
                      type: 'success'
                      });
                    }
            })
            return file;
          }, () => {
            this.$message.error(this.$t('Sellerbanner.Sellerbanner.cannotexceed4'));
            return Promise.reject();
          });
          return isSize
          }
        }
        break;
      }
      return (isJPG || isBMP || isGIF || isPNG) && this.isLt2M;
  },
  // 图片个数超出限制
  OnExceed(file, fileList) {
      this.$utils.commonUtils.tip(this.$t('Sellerbanner.Sellerbanner.uploadupto'),'error')
  },
  //删除图片
    handleRemove(file, fileList) {
      this.fileList = [];
      this.dialogImageUrl = '';
        // console.log(file, fileList);
    //     let config = {   //添加请求头
    //       headers:{'Content-Type':'application/json;charset=utf-8'}
    //     };
    //   let result = []
    //   const that = this;
    //   result.push(file.url)
    //   this.$api.generalize.deleteFileList(result,config).then( res => {
    //     if(res.errorCode == '100200'){
    //       this.fileList.forEach( (v,index) => {
    //           if(v.url == file.url) {
    //               that.fileList.splice(index,1);
    //           }
    //       })
    //       let resultA = []
    //       that.fileList.forEach( val => {
    //           resultA.push(val.url) 
    //       })
    //       that.dialogImageUrl =  resultA.join('|')

    //     }
    //     // console.log(res,'res删除图片')
    // })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },