上传图片前限制图片比例&大小&格式

这里我用的elementui中的上传组件upload
在上传之前的beforUpload方法中定义如下：

beforeUpload(file) {
          let _this = this;
         // 图片格式
          const imgType = 'image/jpeg,image/jpg,image/png'.includes(file.type);
        //   图片大小
          const imgSize = file.size / 1024 / 1024 <= 0.5;
          if (!imgType) {
              this.$message.error('只能上传图片格式');
          } 
          if (!imgSize) {
              this.$message.error('图片大小不能大于0.5M')
          }
          let img = new Image();
          let _URL = window.URL || window.webkitURL;
          img.src = _URL.createObjectURL(file);
          let pixel = new Promise(function(resolve, reject) {
                img.onload = function() {
                	/* 有时我们不能完全满足宽高比是相同的， 
                	等比例缩放后的图片会有细微的比例差距
                	这时就要用到等比例缩放的方式来计算判断是否满足上传的要求*/
                	// 固定宽与上传图片的宽比
                    let widthRito = 310/img.width;
                    // 固定高与上传图片的高比
                    let heightRito = 405/img.height;
                    // 缩放比列的计算，如果宽比小于高比取宽比，否则取高比
                    let rito = widthRito < heightRito ? widthRito : heightRito;
                    // 得到缩放后图片的宽
                    let currentWidth = img.width * rito;
                    // 得到缩放后图片的高
                    let currentHeight = img.height * rito;
                    // 判断缩放后的宽高比是否会和固定的宽高比一样，
                    //因为缩放后等到的宽高会有细微小数的差距，
                    // 所以用四舍五入可以得到和固定的宽高相同
                    let valid = (Number(Number.parseFloat(currentWidth).toFixed()) / Number(Number.parseFloat(currentHeight).toFixed())) == 310/405;
                	
                	/*直接根据上传图片宽高比是否满足固定宽高比*/
                    // 判断图片比列是否满足310px*405px
                    let valid = (img.width / img.height) == (310 / 405);
                    // 满足条件调用promis的resolve，否则reject
                    valid ? resolve() : reject(); 
                }
            }).then(() => {
                // 成功返回
                return file;
            }, () => {
                // 不成功返回promis的reject，在element中当返回promis的reject时也会停止上传
                _this.$message.error('图片比列310px*405px');
                return Promise.reject()
            })
            return imgSize && imgType && pixel;


      },

限制图片尺寸并且自动压缩图片大小

beforeUpload(file) {
          let _this = this;
         // 图片格式
          const imgType = 'image/jpeg,image/jpg,image/png'.includes(file.type);
        //   const imgSize = file.size / 1024 / 1024 <= 0.5 ;
          if (!imgType) {
              this.$message.error('只能上传图片格式');
              return false;
          }
          let pixel = new Promise(function(resolve, reject) {
              let _URL = window.URL || window.webkitURL;
              let imgSize = file.size / 1024 <= 100;
              let img = new Image()
                img.onload = function() {
                    // 固定宽与上传图片的宽比
                    let widthRito = 310/img.width;
                    // 固定高与上传图片的高比
                    let heightRito = 405/img.height;
                    // 缩放比列的计算，如果宽比小于高比取宽比，否则取高比
                    let rito = widthRito < heightRito ? widthRito : heightRito;
                    // 得到缩放后图片的宽
                    let currentWidth = img.width * rito;
                    // 得到缩放后图片的高
                    let currentHeight = img.height * rito;
                    file.width = img.width;
                    file.height = img.height;
                    // 判断缩放后的宽高比是否会和固定的宽高比一样，因为缩放后等到的宽高会有细微小数的差距，所以用四舍五入可以得到和固定的宽高相同
                    let valid = (Number(Number.parseFloat(currentWidth).toFixed()) / Number(Number.parseFloat(currentHeight).toFixed())) == 310/405;
                    // 判断图片比列是否满足310px*405px
                    // Number.parseFloat(Number.parseFloat(310 / 405).toFixed(3))
                    // let imgBillie = Number.parseFloat(Number.parseFloat((img.width / img.height)).toFixed(3));
                    // let fixedBillie =  Number.parseFloat(Number.parseFloat(310 / 405).toFixed(3));
                    // let valid = Math.abs(imgBillie - fixedBillie) <= 0.002;
                    // let valid = Number.parseFloat((310 /405).toString().slice(0, 5)) == Number.parseFloat((img.width / img.height).toString().slice(0, 5));
                    // 满足条件调用promis的resolve，否则reject
                    // valid ? resolve() : reject(); 
                    // if (valid && imgSize) {
                    //     resolve(file);
                    // } else {
                    //     if (!valid) {
                    //         _this.$message.error('图片比列310px*405px');
                    //         reject();
                    //     } else {
                    //         compressAccurately(file, {
                    //             size: 100
                    //         }).then(res => {
                    //             resolve(res)
                    //         })

                    //     }
                    // } 
                    if (!valid) {
                        _this.$message.error('图片比列310px*405px');
                        reject();
                    } else {
                        compressAccurately(file, {
                            size: 100
                        }).then(res => {
                            resolve(res)
                        })
                    }  
                }
                img.src = _URL.createObjectURL(file);
            })
            return  pixel;
        
      },