Antd Form 表单中使用Upload组件

最新推荐文章于 2025-05-22 15:26:10 发布

DaXiong1024

最新推荐文章于 2025-05-22 15:26:10 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript TS 文章标签： html html5 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47076989/article/details/120022753

JavaScript 同时被 2 个专栏收录

39 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了在Ant Design的Form组件中使用Upload组件进行文件上传的实现方式，包括设置文件类型、最大数量、大小限制以及上传前验证。在上传过程中，通过customRequest方法自定义上传逻辑，确保文件不超过200MB，并在上传成功后更新状态。同时，展示了normFile函数用于规范化文件列表。

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

Antd Form 表单中使用Upload组件

html

<Form.Item
   label='文件上传'
   name='uploadFile'
   valuePropName='fileList'
   getValueFromEvent={normFile}
   rules={[
     { required: true, message: '必填' }
   ]}
>
  <Upload
     {...uploadProps}
  >
    <Button><UploadOutlined />Upload</Button>
  </Upload>
</Form.Item>

const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e
  }
  return e && e.fileList
}
const maxSize = 200
const uploadProps: UploadProps = {
  accept: '.svga,.mp4',
  maxCount: 1,
  beforeUpload: (file) => {
    const isMAX = file.size / 1024 / 1024 < maxSize
    if (!isMAX) {
      message.error(`上传的svga/mp4不能超过${maxSize}M！`)
    }
    return isMAX
  },
  customRequest: async (options) => {
    const formData = new FormData()
    formData.append('file', options.file)
    const { data } = await giftUploadSvgaApi(formData, ({ total, loaded }) => {
      options.onProgress(
        { percent: Math.round((loaded / total) * 100).toFixed(2) }, options.file
      )
    })
    if (data.retCode === 0) {
      setSvgaMd5(result.md5)
      options.onSuccess(data, options.file)
      message.success(`${options.file.name} 上传成功!`)
    }
  }
}