vue中发布文章对首篇文章封面和次篇文章封面图片尺寸校验

vue中发布文章对首篇文章封面和次篇文章封面图片尺寸校验

根据后端返的url判断图片尺寸

  // 获取图片尺寸
    getImgSize(url) {
      return new Promise((resolve, reject) => {
        const imgObj = new Image()
        imgObj.src = url
        imgObj.onload = () => {
          resolve({
            width: imgObj.width,
            height: imgObj.height
          })
        }
      })
    },

  this.getImgSize(pic.url).then(res => {
        if (this.tuwenList.length === 1) {
          if (res.width / res.height === 2.35 / 1) {
            this.tuwenform.thumbMediaId = pic.mediaId
            this.tuwenform.thumbMediaUrl = pic.wxUrl
            this.$refs.addPic.dialogVisible = false
          } else {
            this.$message.error('首篇图文封面图片长宽比应为2.35:1')
          }
        } else {
          if (res.width / res.height === 1 / 1) {
            this.tuwenform.thumbMediaId = pic.mediaId
            this.tuwenform.thumbMediaUrl = pic.wxUrl
            this.$refs.addPic.dialogVisible = false
          } else {
            this.$message.error('次篇图文封面图片长宽比应为1:1')
          }
        }
      })

上传时的校验

 // 上传
    beforeupload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传图片仅支持PNG\JPEG\JPG\GIF格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },