vue中限制图片宽高相等再上传,upload ui组件限制图片宽高相等_ant vue2 upload 上传等宽等高正比图片-CSDN博客

本文链接：https://blog.csdn.net/Angely_cc/article/details/112789691

本文介绍了一种基于Vue的图片上传组件的beforeUpload方法，该方法确保只有大小小于5MB且格式为JPG或PNG的图片才能上传。当图片类型需要宽高相等时，会进一步检查图片尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结合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
      } 
    },