记录问题：antd的upload组件文档中对于视频的上传预览没有明确的文档demo，在这里记录一下

项目需求：支持图片及视频的上传并实现预览，点击上传后不会立即请求接口上传资源，后续点击确定再上传

                <ProFormUploadButton
                  name="upload"
                  label="广告"
                  max={1}
                  fieldProps={{
                    accept: 'image/png,video/mp4',
                    name: 'file',
                    listType: 'picture-card',
                    maxCount: 1,
                    withCredentials: false,
                    onPreview: handlePreview,
                    previewFile: (file) => {
                      if (file.type === 'video/mp4') {
                        return new Promise((resolve, reject) => {
                          const reader = new FileReader();
                          reader.readAsDataURL(file);
                          reader.onload = () => resolve(reader.result as string);
                          reader.onerror = (error) => reject(error);
                      } else {
                        return new Promise(async (resolve) => {
                          const img = await getBase64(file as RcFile);
                          resolve(img);
                    fileList: fileList,
                    // eslint-disable-next-line @typescript-eslint/no-shadow
                    onChange: ({ fileList }) => {
                      setFileList(fileList);
                    beforeUpload: () => {
                      return false;
                  icon={<ToTopOutlined style={{ color: '#745CC3', fontSize: 24 }} />}
                  title=""
                  rules={[{ required: true, message: '请上传图片/视频' }]}
const handleCancel = () => {
    setPreviewOpen(false);
    setPreviewVideoOpen(false);
    videoRef.current.pause();
  const handlePreview = async (file: any) => {
    if (file.type === 'video/mp4') {
      const current = file.originFileObj;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(current);
      fileReader.onload = function (e) {
        setPreviewVideo(e.target?.result);
        setPreviewVideoOpen(true);
        setPreviewVideoTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
    } else {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj as RcFile);
      setPreviewImage(file.url || (file.preview as string));
      setPreviewOpen(true);
      setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
        <Modal
          open={previewOpen}
          zIndex={9999}
          title={previewTitle}
          footer={null}
          centered={true}
          onCancel={handleCancel}
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        <Modal
          open={previewVideoOpen}
          zIndex={9999}
          title={previewVideoTitle}
          footer={null}
          centered={true}
          width={540}
          onCancel={handleCancel}
          <video src={previewVideo} controls width={500} height={500} ref={videoRef}>
            您的浏览器不支持 video 标签。
          </video>
        </Modal>
 
                    记录问题：antd的upload组件文档中对于视频的上传预览没有明确的文档demo，在这里记录一下。项目需求：支持图片及视频的上传并实现预览，点击上传后不会立即请求接口上传资源，后续点击确定再上传。
当成功时返回上传到oss的路径,以及文件的类型
首先需要一个上传文件的组件a-upload，一个进度条, 在beforeUpload中对文件进行文件类型的检测,在customRequest上传文件到阿里云 oss
## 1.beforeUpload对文件类型进
				
最近有一个引入sql编辑器插件的需求，要求代码高亮显示，代码智能提示，以及支持自定义代码提示列表等功能。中途在自定义代码提示列表中由于没有相关demo，所以踩了一些坑，遂将其整理如下，以便日后查看。
yarn add react-ace //或 npm install react-ace
2.在项目中引入
import AceEditor from 'react-ace';
3....
				
React Antd Upload 组件默认支持拖拽上传，如果需要禁止拖拽上传，可以设置 Upload 组件的 `drag` 属性为 `false`，如下所示：
```jsx
<Upload
  // ...其他属性
  drag={false}
  {/* ... */}
</Upload>
设置 `drag={false}` 后，用户将无法通过拖拽文件进行上传，只能通过点击上传按钮或者选择文件进行上传。
                    CSDN-Ada助手: 
                    恭喜您开始博客创作！标题看起来非常有吸引力，我期待着阅读您的第一篇博客。实现视频预览功能对于上传组件来说是一个很有用的功能，我相信您的经验和知识能够帮助更多的开发者。在下一篇博客中，或许您可以分享一些关于如何处理视频上传的优化技巧或者其他相关的功能拓展，这样可以让读者更加深入了解该组件的使用和扩展。期待您的下一篇博文！
推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1