a-upload上传限制图片类型、大小、以及宽高尺寸

html

<a-upload
  v-model:file-list="fileList"
  name="avatar"
  list-type="picture-card"
  class="avatar-uploader"
  :show-upload-list="false"
  action
  :before-upload="beforeUpload"
  :customRequest="changeRequest"
  :disabled="!isEdit"
  accept=".jpg,.jpeg,.png"
>
  <img v-if="imageUrl" :src="imageUrl" class="network-img" />
  <div v-else>
    <loading-outlined v-if="loading"></loading-outlined>
    <plus-outlined class="add-icon" v-else></plus-outlined>
    <div class="ant-upload-text">上传图片</div>
  </div>
</a-upload>

js

// 上传之前的回调
const beforeUpload = file => {
  return new Promise((resolve, reject) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
    if (!isJpgOrPng) {
      message.error('只能上传jpg、jpeg、png格式的图片')
      return reject(false)
    }
    let w = 0,
      h = 0
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      const image = new Image()
      image.src = reader.result
      image.onload = () => {
        w = image.width
        h = image.height
        if (w <= 550 && h <= 510) {
          // 图片尺寸上限为550
          return resolve(true)
        }
        message.error('图片尺寸上限为550*510')
        return reject(false)
      }
    }
    const isLt5M = file.size / 1024 / 1024 <= 5
    if (!isLt5M) {
      message.error('图片大小不能超过5M')
      return reject(false)
    }
    return isJpgOrPng && isLt5M
  })
}