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事件。