antd pro 表单添加富文本编辑器上传图片、视频(braft-editor)

引入相关

import BraftEditor from 'braft-editor'; // 引入编辑器组件
import 'braft-editor/dist/index.css'; // 引入编辑器样式
import { ContentUtils } from 'braft-utils';
import controls from '@/config/braft';//富文本编辑器菜单

注：Form.Item一定不要加name,否则值是无法回显的。

<Form.Item
            label="XXX"
            // name="XXX"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}>
              <BraftEditor
              className="my-editor"
              controls={controls}
              placeholder="请输入正文内容"
              value={editorcontent}
              onChange={(editorState) => {
                setEditorcontent(editorState);
              }}
              extendControls={extendControlsContent}//自定义菜单(多媒体)
              />
            </Form.Item>

const uploadHandler = (info) => {
  if (info.file.status === 'done') {
    let data = info.file.response;
    if (data.code === 0) {
    info.file.type === "video/mp4"?
    setEditorcontent(
        ContentUtils.insertMedias(editorcontent, [
          {
            type: 'VIDEO',//视频是VIDEO写别的会导致视频无法显示
            url: 服务器返回地址,
          },
        ]),
      )
      :setEditorcontent(
        ContentUtils.insertMedias(editorcontent, [
          {
            type: 'IMAGE',
            url: 服务器返回地址,
          },
        ]),
      );
    } else {
      message.error('图片上传失败');
    }
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};
const head = {Authorization:localStorage.getItem('Authorization'),}
const extendControlsContent = [
  {
    key: 'antd-uploader',
    type: 'component',
    component: (
      <Upload
        accept="*"
        showUploadList={false}
        onChange={uploadHandler}
        headers= {head}
        action={'服务器地址/image'}
      >
        <button type="button" className="control-item button upload-button" data-title="插入图片">
          上传图片
        </button>
      </Upload>
    ),
  },
   {
    key: 'antd-uploader1',//两个key值不可以相同，否则出不来
    type: 'component',
    component: (
      <Upload
        accept="*"
        showUploadList={false}
        onChange={uploadHandler}
        headers= {head}
        action={'服务器地址/video'}
      >
        <button type="button" className="control-item button upload-button" data-title="插入视频">
          上传视频
        </button>
      </Upload>
    ),
  },
];