Ant design——message防抖优化——富文本的使用——富文本数据的收集——上传图片保存本地

Posted 2022-10-15 勇敢*牛牛

• button按钮有个loading加载态度。加载状态为true则不可点击。
  通过这个属性来完成项目中的防抖优化

const [seachBtn,setSeachBtn] = useState(false)
message.error("用户名不能为空",2,()=>
    setSeachBtn(false)
);
<Button loading=seachBtn type="primary" onClick=showDrawer>查询</Button></div>

---

react——富文本的使用

网址：https://www.wangeditor.com/v5/for-frame.html#demo-2

下载：安装

yarn add @wangeditor/editor @wangeditor/editor-for-react

基本使用

import React,  useState, useEffect  from 'react'
import  Editor, Toolbar  from '@wangeditor/editor-for-react'


const Details = () => 
    // editor 实例
    const [editor, setEditor] = useState(null)
    // 编辑器内容
    const [html, setHtml] = useState('')
    // 工具栏配置
    const toolbarConfig =     
    // 编辑器配置
    const editorConfig =               
        placeholder: '请输入内容...',
        MENU_CONF://上传图片时设置一个空对象
    
    editorConfig.MENU_CONF['uploadImage'] = 
        // 上传图片的配置
        server: 'http://10.9.46.247:8000/fdphoto',
   
    // 及时销毁 editor ，重要！
    useEffect(() => 
        return () => 
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        
    , [editor])
    return (
        <>
                 <div style= border: '1px solid #ccc', zIndex: 100>
                <Toolbar
                    editor=editor
                    defaultConfig=toolbarConfig
                    mode="default"
                    style= borderBottom: '1px solid #ccc' 
                />
                <Editor
                    defaultConfig=editorConfig
                    value=html
                    onCreated=setEditor
                    onChange=editor => setHtml(editor.getHtml())
                    mode="default"
                    style= height: '500px', overflowY: 'hidden' 
                />
            </div>
            <div style= marginTop: '15px' >
                html
            </div>
            <Button>点击我获取富文本信息数据收集通过状态提升即可</Button>
        </>
    );


export default Details;

---

富文本上传图片：接口地址返回类型

负载的文件名称为：wangeditor-uploaded-image

---

必须规定富文本信息的返回接口：即可

接口自测：

利用nodejs完成：服务器代码

var express = require("express");
var app = express();
app.listen(8000)
// http://localhost:3000
// http://10.9.46.247:3000/
app.use(require("cors")());
app.use(express.json());
app.use(express.static('./public'))


const multer = require('multer')
const storage = multer.diskStorage(
    destination: function (req, file, cb) 
        cb(null, 'public/img/')
    ,
    filename: function (req, file, cb) 
        var singfileArray = file.originalname.split('.');
        var fileExtension = singfileArray[singfileArray.length - 1];

        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        cb(null, file.fieldname + '-' + uniqueSuffix+"." + fileExtension);
        // console.log(file);
    
)
const upload = multer(
    storage
)
/* 上传图片 */
app.post('/fdphoto', upload.single('wangeditor-uploaded-image'), (req, res) => 
    res.send(
        path: 'http://10.9.46.247:8000/img/' + req.file.filename,
        errno:0,
        data:[
            url:'http://10.9.46.247:8000/img/' + req.file.filename,
            alt: req.file.filename,
            href:'http://10.9.46.247:8000/img/' + req.file.filename
        ]
    )
)