element ui上传图片限制像素和文件大小

代码如下

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      v-loading="loading"
      :action="uploadUrl"
      :data="dataObj"
      list-type="picture"
      :with-credentials="true"
      :multiple="false"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
import config from '../../utils/config.utils'

export default {
  name: 'multiUpload',
  props: {
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 9
    },
    fileSize: {
      type: Number,
      default: 99999
    },
    isShowLimit: {
      type: Boolean,
      false: true
    }
  },
  data() {
    return {
      loading: false,
      dataObj: {
        prefixUrl: 'certification'
      },
      uploadUrl: `${config.apiPath.service}/upload`
    }
  },
  computed: {},
  methods: {
    emitInput(fileList) {
      this.$emit('upload-res', fileList)
    },
    beforeUpload(file) {
      console.log(file, 'image')

      return new Promise((resolve, reject) => {
        let size = file.size / 1024 / 1024 < this.fileSize
        if (this.isShowLimit && !size) {
          this.$message.error('图片大小不能超过' + this.fileSize + 'M')
          reject()
          return false
        }
        this.asyncImgChecked(file).then(data => {
          console.log(data, 'data')
        })
        this.loading = true
        resolve()
      })
    },
    asyncImgChecked(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file) // 必须用file.raw
        reader.onload = () => {
          // 让页面中的img标签的src指向读取的路径
          let img = new Image()
          img.src = reader.result

          if (img.complete) {
            console.log(img.width, img.height, 'image-complete')

            // 如果存在浏览器缓存中
            if (img.width / img.height !== 2) {
              this.$message.warning(
                `图片比例2：1,当前文件${img.width}×${img.height}`
              )
              resolve(false)
            } else {
              resolve(true)
            }
          } else {
            img.onload = () => {
              console.log(img.width, img.height, 'image-load')

              if (img.width / img.height !== 2) {
                this.$message.warning(
                  `图片比例2：1,当前文件${img.width}×${img.height}`
                )
                resolve(false)
              } else {
                resolve(true)
              }
            }
          }
        }
      })
    },
    handleUploadSuccess(res, file) {
      this.loading = false
      console.log(res, 'res')
      if (res.code === 1) {
        this.emitInput(res.data)
      }
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多只能上传' + this.maxCount + '张图片',
        type: 'warning',
        duration: 1000
      })
    }
  }
}
</script>
<style scoped lang="scss">
.avatar-uploader {
  width: 100px;
  height: 100px;
}
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
</style>

获取图片尺寸

    asyncImgChecked(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file) // 必须用file.raw
        reader.onload = () => {
          // 让页面中的img标签的src指向读取的路径
          let img = new Image()
          img.src = reader.result

          if (img.complete) {
            console.log(img.width, img.height, 'image-complete')

            // 如果存在浏览器缓存中
            if (img.width / img.height !== 2) {
              this.$message.warning(
                `图片比例2：1,当前文件${img.width}×${img.height}`
              )
              resolve(false)
            } else {
              resolve(true)
            }
          } else {
            img.onload = () => {
              console.log(img.width, img.height, 'image-load')

              if (img.width / img.height !== 2) {
                this.$message.warning(
                  `图片比例2：1,当前文件${img.width}×${img.height}`
                )
                resolve(false)
              } else {
                resolve(true)
              }
            }
          }
        }
      })
    },