elementUI上传图片前判断限制图片宽高和尺寸

beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传宝贝详情图片大小不能超过 3MB!");
      }
      let _this = this;
      const isSize = new Promise(function(resolve, reject) {   //upload内部需要一个promise,简单的return出false并没有什么用
        let width = 700;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          file.width = img.width;      //获取到width放在了file属性上
          file.height = img.height;    //获取到height放在了file属性上
          let valid = img.width >= width;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);    //onload是异步加载，所以一定要在onload后在执行判断图片尺寸

      }).then(
        () => {
          return file;
        },
        () => {
          this.tipShow = true;
          let _this = this;
          setTimeout(function() {
            _this.tipShow = false;
          }, 5000);
          return file;
        }
      );
      return isLt3M && isSize;
    },

PS：因为我的需求是，图片大小不能超过3MB，无法上传；如果宽度小于700弹出提示框，但是还是可以上传的；获取图片宽高传给后端。

一 . 参考：

elementUI图片上传之前对图片的宽高做限制：

handleImagesUrlBefore:function(file){
                var _this = this;
                return new Promise(function(resolve, reject) {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var image = new Image();
                        image.onload = function () {
                            var width = this.width;
                            var height = this.height;
                            if (width>695 || width < 685){
                                _this.$alert('图片尺寸必须在685~695之间！', '提示', {confirmButtonText: '确定'});
                                reject();
                            }
                            if (height >695||height< 685) {
                                _this.$alert('图片尺寸必须在685~695之间！', '提示', {confirmButtonText: '确定'});
                                reject();
                            }
                            resolve();
                        };
                        image.src = event.target.result;
                    }
                    reader.readAsDataURL(file);
                });
            }

elementUI上传图片前判断图片的尺寸大小

beforeAvatarUpload(file) {
   
    const isSize = new Promise(function(resolve, reject) {
        let width = 100;
        let height = 100;
        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(() => {
        return file;
    }, () => {
        this.$message.error('上传的icon必须是等于或大于100*100!');
        return Promise.reject();
    });
    return  isSize;
}

 二 . 另外提一下，new Image()的应用：

摘自  https://www.jianshu.com/p/14853aee567b

2.1  建立图像对象：
　　  图像对象名称=new Image([宽度],[高度])
　　属性：border|complete|height|hspace|lowsrc|name|src|vspace|width
　　事件：onabort|onerror|onkeydown|onkeypress|onkeyup|onload
2.2  需要注意的是：
　　src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。

var img = new Image();  
img.onload = function () {
  alert("img is loaded")
};  
img.onerror = function () {
  alert("error!")
};  
img.src = "http://www.baidu.com/img.gif";  
function show(){
  alert("body is loaded");
}  
window.onload = show;  

2.3  提示：
　　 在 FF 中，img对象的加载包含在body的加载过程中，既是 img加载完之后，body才算是加载完毕，触发 window.onload 事件。
　　在 IE 中，img对象的加载是不包含在 body的加载过程之中的，body加载完毕，window.onload事件触发时，img对象可能还未加载结束，img.onload事件会在 window.onload之后触发。
　　即：
　　考虑到浏览器的兼容性和网页的加载时间，尽量不要在 Image 对象里放置过多的图片，否则在 FF 中会影响网页的下载速度。当然如果你在window.onload之后，执行预加载函数，就不会有 FF 中的问题了。
　　可以通过Image对象的complete属性来检测图像是否加载完成（每个Image对象都有一个complete属性，当图像处于装载过程中时，该属性值false,当发生了onload、onerror、onabort中任何一个事件后，则表示图像装载过程结束（不管成没成功），此时complete属性为true）
　　ie 火狐等大众浏览器均支持 Image对象的 onload事件。
　　ie8及以下、opera 不支持onerror事件。

转载于:https://www.cnblogs.com/liAnran/p/11213964.html