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

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

const [seachBtn,setSeachBtn] = useState(false)
const showDrawer = () => {
	setSeachBtn(true);
	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
        }]
    })
})