react + ts 中 // 编辑器配置 const editorConfig: Partial<IEditorConfig> = { // 在编辑器中,点击选中“附件”节点时,要弹出的菜单 hoverbarKeys: { attachment: { menuKeys: ['downloadAttachment'], // “下载附件”菜单 }, }, MENU_CONF: { // 自定义上传图片 uploadImage: { async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const alt = ret?.result?.originalName; const href = fileSever + ret?.result?.name; insertFn(url, alt || '', href || ''); }, }); } catch (error) { console.log(error); } }, }, // 自定义上传视屏 uploadVideo: { async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const alt = ret?.result?.originalName; const href = fileSever + ret?.result?.name; insertFn(url, alt || '', href || ''); }, }); } catch (error) { console.log(error); } }, }, uploadAttachment: { // 自定义上传附件 async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const name = ret?.result?.originalName; insertFn(url, name); }, }); } catch (error) { console.log(error); } }, }, }, };配置了自定义上传附件,但是在上传附件时没有执行自定义上传附件的服务,控制台报错‘Uncaught (in promise) Error: Cannot get upload server address 没有配置上传地址’
时间: 2024-04-27 20:21:16 浏览: 16
根据你提供的信息,错误信息显示没有配置上传地址。你需要检查一下 fetchApi 函数调用的 uploadImgFile 参数是否配置正确。此外,你也可以检查一下后端服务是否可以正常访问。如果这些都没有问题,你可以尝试在自定义上传附件的回调函数 onRequestSuccessfull 中打印一下 ret 参数,看看是否正确返回了上传附件的信息。
相关问题
react 中 // 编辑器配置 const editorConfig: Partial<IEditorConfig> = { // 在编辑器中,点击选中“附件”节点时,要弹出的菜单 hoverbarKeys: { attachment: { menuKeys: ['downloadAttachment'], // “下载附件”菜单 }, }, MENU_CONF: { // “上传附件”菜单的配置 uploadAttachment: { customUpload: true, // 开启自定义上传 onUpload(file: File) { // 调用自定义的上传方法 console.log(file); }, // 插入到编辑器后的回调 onInsertedAttachment(elem: any) { console.log('inserted attachment', elem); }, }, }, }; customUpload: true, // 开启自定义上传 没有生效
在代码中设置 `customUpload: true` 是开启自定义上传的关键步骤,但仅仅设置此配置是不够的,你还需要将 `uploadAttachment` 菜单的 `customUpload` 属性也设置为 `true`。在你提供的代码中,仅仅是对 `uploadAttachment` 菜单进行了配置,但是没有设置其 `customUpload` 属性。因此,你需要将代码修改为如下形式:
```
const editorConfig: Partial<IEditorConfig> = {
// 在编辑器中,点击选中“附件”节点时,要弹出的菜单
hoverbarKeys: {
attachment: {
menuKeys: ['downloadAttachment'], // “下载附件”菜单
},
},
MENU_CONF: {
// “上传附件”菜单的配置
uploadAttachment: {
customUpload: true, // 开启自定义上传
onUpload(file: File) {
// 调用自定义的上传方法
console.log(file);
},
// 插入到编辑器后的回调
onInsertedAttachment(elem: any) {
console.log('inserted attachment', elem);
},
},
},
};
```
修改后,你的自定义上传方法应该可以生效了。
const DemoPage: React.FC = () => { return ( <></> ) } export default DemoPage;中增加设计代码
当然可以,下面是一个示例设计代码的例子:
```jsx
import React from 'react';
import { Button, Typography } from 'antd';
const { Title, Paragraph } = Typography;
const DemoPage: React.FC = () => {
return (
<>
<Title level={2}>这是一个示例设计</Title>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel ante vitae libero pharetra iaculis. Nullam vel
ornare sapien, sed commodo libero. Sed dapibus egestas suscipit. In eget est nulla. Sed commodo, est vel
accumsan blandit, nulla massa sodales diam, vel tincidunt risus lorem nec metus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non ante sed risus mattis consequat
quis vel velit. Duis vel magna ut odio euismod feugiat. Integer auctor, dui et posuere bibendum, odio elit
tincidunt ipsum, sit amet congue velit justo vel ligula. Maecenas cursus, quam ut tincidunt maximus, nulla enim
convallis quam, at molestie ipsum nulla vel mauris.
</Paragraph>
<Button type="primary" size="large">
这是一个按钮
</Button>
</>
);
};
export default DemoPage;
```
这里我们使用了 Ant Design 的 Typography 和 Button 组件,创建了一个标题、一个段落和一个按钮。你可以根据你的需要添加更多组件或修改现有组件的样式。注意,这段代码需要在 React 项目中的某个组件中使用才能正常显示。