vue中限制图片宽高相等再上传,upload ui组件限制图片宽高相等

结合upload组件

// imgType ==8时，要求图片宽高相等才可以上传
    beforeUpload(file) {
      let that = this
      const isLt5M = file.size / 1024 / 1024 < 5
      const allowedFileType =
        file.type.indexOf('jpg') !== -1 || file.type.indexOf('png') !== -1 || file.type.indexOf('jpeg') !== -1
      if (!allowedFileType) {
        this.$message.error('请上传正确的图片格式!')
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB!')
      }
      let whsize = true
      let promise = ''
      if (this.imgType == 8) {
      return new Promise((resolve, reject) => {
          const img = new Image()
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function() {
            // 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
            const url = reader.result
            // reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
            img.src = url
          }
          img.onload = function() {
            const width = img.width
            const height = img.height
            console.log(width, height)
            if (width != height) {
              whsize = false
              that.$message.error('请按照尺寸比例要求上传图片!')
              reject()
            } else {
              if(allowedFileType && isLt5M){
                resolve(file)
              }
            }
          }
        })
      }
      if (that.imgType != 8) {
        return allowedFileType && isLt5M
      } 
    },