elementUI upload 对图片的宽高做校验

原文链接：https://blog.csdn.net/weixin_34233856/article/details/88036541

前言

我们的项目是使用vue+elementUI开发的，产品提出了一个小功能：上传图片的时候对其宽高做校验。好在前人栽树后人就只好乘凉啦，借鉴了前人经验开始学习之旅。

过程

我们的需求是尺寸小于750*1334显示弹窗提示，确认也是可以提交的，我刚开始把弹窗的方法写在了reject（）里，想着根据弹窗的确定还是取消return file还是别的，思路没毛病，实现一堆坑。。。

 // 图片上传前的处理
    beforeAvatarUpload(file) {
      console.log('上传图片中----------')
      // 上传图片前处理函数
      const isJPG =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/gif";
      let that = this;
      let isAllow = false;
      if (!isJPG) {
          this.$message.error("上传图片只能是 jpg、png、gif 格式!");
      }
      const isSize = new Promise(function(resolve, reject) {
          let width = 750;
          let height = 1334;
          let _URL = window.URL || window.webkitURL;
          let image = new Image();
          image.onload = function() {
            let valid = image.width < width || image.height < height;
            valid ? resolve() : reject() ;
          };
          image.src = _URL.createObjectURL(file);
      }).then(
          () => {
            return file;
          },
          () => { // 取消上传
            that.$confirm('图片尺寸有误是否继续操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              return file; 
            }).catch(() => { 
              return Promise.reject(); 
            });
          }
        );
      return isJPG && isSize;
    },

看着没啥毛病 为了测试他是不是不符合就没有file，http-request事件里监测文件是否上传

handleFile(response) {
      console.log('上传成功!')
      console.log(response)
      this.$message.success("上传成功");
    },

 这下问题就出来了，无论符合不符合都会上传成功，经过一番打印找到了原因，虽然走了reject但是弹窗中的return并没有起作用，弹窗后面打印的东西会和弹窗一起出现，reject中弹窗是异步的，还没有等他return后续的东西都走完了。于是我就改变了判断，就可以啦！

// 图片上传前的处理
    beforeAvatarUpload(file) {
      console.log('上传图片中----------')
      // 上传图片前处理函数
      const isJPG =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/gif";
      let that = this;
      let isAllow = false;
      if (!isJPG) {
          this.$message.error("上传图片只能是 jpg、png、gif 格式!");
      }
      const isSize = new Promise(function(resolve, reject) {
          let width = 750;
          let height = 1334;
          let _URL = window.URL || window.webkitURL;
          let image = new Image();
          image.onload = function() {
            let valid = image.width < width || image.height < height;
            if(valid) { //不符合
              that.$confirm('图片尺寸小于750*1334, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                resolve();
              }).catch(() => { 
                reject();
              });
            }else{
              resolve();
            }
          };
          image.src = _URL.createObjectURL(file);
      }).then(
          () => { // resolve
            return file;
          },
          () => { // 取消上传 reject
            return Promise.reject(); 
          }
        );
      return isJPG && isSize;
    },