Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

最近在使用antd-design-pro构建一个后台管理系统。
用到了一个上传组件Upload。其中有一些相关的函数回调。

<Upload
    name="avatar"
    listType="picture-card"
    className="avatar-uploader"
    showUploadList={false}
    action="https://xxx.com/api/upload"
    beforeUpload={beforeUpload}
    onChange={handleChange}
>
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

beforeUpload的file参数,在node_modulesantdlibuploadinterface.d.ts有相应的定义。

beforeUpload?:?(file: RcFile, FileList: RcFile[]) => boolean | PromiseLike<void>;

但在当前的tsx中如何使用呢?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
132 views
Welcome To Ask or Share your Answers For Others

1 Answer

首先你要知道 Upload 这个 组件的 props 类型,比如叫 UploadProps。

import {UploadProps} from 'antd/xxx/xx'

type BeforeUpload = UploadProps['beforeUpload']

const beforeUpload: BeforeUpload = file => {
    ...
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...