怎么用antd pro中ProFormUploadButton组件上传视频

可以通过以下步骤使用antd pro中的ProFormUploadButton组件上传视频：

1. 在你的React组件中，引入ProFormUploadButton组件，如下所示：

import { ProFormUploadButton } from '@ant-design/pro-form';

2. 将ProFormUploadButton组件放入到你的表单中，并设置相关的属性，如下所示：

<ProFormUploadButton
    label="上传视频"
    name="video"
    fieldProps={{
        name: 'video',
        getValueFromEvent: handleVideoUpload,
    }}
/>

其中，label属性用于显示上传按钮的标签，name属性用于指定表单字段的名称，fieldProps属性用于设置表单字段的属性，包括上传视频的回调函数handleVideoUpload。

3. 在handleVideoUpload回调函数中，使用File API上传视频，并将上传结果保存到组件的state中。例如：

const handleVideoUpload = async (file: File) => {
   const formData = new FormData();
   formData.append('video', file);

   const response = await fetch('/api/upload-video', {
      method: 'POST',
      body: formData,
   });

   if (response.status === 200) {
      const { url } = await response.json();
      setState({ videoUrl: url });
   } else {
      message.error('上传视频失败！');
   }
};

其中，fetch函数用于发送上传请求，使用FormData将视频文件转换为二进制数据，response.status用于判断上传结果，message用于显示上传失败的提示信息。

4. 在你的后端服务器上，创建一个处理视频上传请求的API接口。例如，使用Express.js创建如下的API路由：

const express = require('express');
const multer = require('multer');
const router = express.Router();

const storage = multer.diskStorage({
   destination: function (req, file, cb) {
      cb(null, 'public/videos/');
   },
   filename: function (req, file, cb) {
      const ext = file.originalname.split('.')[1];
      cb(null, Date.now() + '.' + ext);
   },
});

const upload = multer({ storage });

router.post('/upload-video', upload.single('video'), (req, res) => {
   const { filename } = req.file;
   const url = `http://localhost:${process.env.PORT}/videos/${filename}`;
   res.json({ url });
});

module.exports = router;

其中，使用multer中间件处理上传请求，将视频文件保存到public/videos目录下，将视频文件的URL返回给客户端。