Antd Form 表单中使用Upload组件

Antd Form 表单中使用Upload组件

1. html

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

2. js

   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} 上传成功!`)
       }
     }
   }