elementUI上传图片前判断限制图片宽高和尺寸 elementUI图片上传之前对图片的宽高做限制: 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弹出提示框,但是还是可以上传的;获取图片宽高传给后端。

一 . 参考:



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,当发生了onloadonerroronabort中任何一个事件后,则表示图像装载过程结束(不管成没成功),此时complete属性为true
  ie 火狐等大众浏览器均支持 Image对象的 onload事件。
  ie8及以下、opera 不支持onerror事件。