antd upload文件格式 大小 尺寸校验

通过beforeUpload 校验

• 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）；也可以返回 Upload.LIST_IGNORE，此时列表中将不展示此文件。 注意：IE9 不支持该方法
• beforeUpload 返回 false 或 Promise.reject 时，只用于拦截上传行为，不会阻止文件进入上传列表（原因）。如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。

import { Button, message, Upload } from 'antd'
const Index= () => {
  // 检测尺寸
  const isSize = (file: File, width: number, height: number) => {
    return new Promise<void>((resolve, reject) => {
      const _URL = window.URL || window.webkitURL
      const img = new Image()
      img.onload = () => {
        _URL.revokeObjectURL(img.src)
        const valid = img.width === width && img.height === height
        valid ? resolve() : reject()
      }
      img.src = _URL.createObjectURL(file)
    })
      .then(() => {
        return file
      })
      .catch(() => {
        message.error(`只能上传尺寸为${width}*${height}`)
        return false || Upload.LIST_IGNORE // 必须要返回 promiseRusule 为'Upload.LIST_IGNORE' 阻止列表展现
      })
  } 
  const detailUploadProps: UploadProps = {
    name: 'file',
    beforeUpload: (file: any) => {
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/bmp'
      if (!isJpgOrPng) {
        message.error('仅支持格式为png、jpg、jpeg、bmp!')
        return isJpgOrPng || Upload.LIST_IGNORE
      }
      if (file.size >> 20) {
        message.error('大小不超过2MB!')
        return false || Upload.LIST_IGNORE
      }
      return isSize(file, 670, 335) 
// return 接受isSize 返回的 Upload.LIST_IGNORE
    },

    onChange(info) {
      const { status } = info.file

      if (status === 'done') {

        if (!info.file.response.isSuccess) {
          message.error(`${info.file.name} ${info.file.response.message}`)
          return
        }
        message.success(`${info.file.name} 文件上传成功.`)
      } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败.`)
      }
    }
  }
    return (
		<Upload{...detailUploadProps}>
           <Button>上传文件</Button>
          </Upload>
    )
}

export default Index