React+wangEditor V4富文本编辑器+Node.js实现图片上传

1
npm i wangeditor@4.6.15 -S

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, { Component } from 'react'
import { Button, Space } from "antd"
import E from 'wangeditor'

export default class Editor extends Component {
    state = {
        content: ""
    }

    editor = {};

    // 获取html方法1
    getHtml = () => {
        alert(this.state.content)
    }

    // 获取html方法2
    getHtml1 = () => {
        alert(this.editor.txt.html())
    }

    // 获取text
    getText = () => {
        alert(this.editor.txt.text())
    }

    componentWillUnmount() {
        this.editor.destroy()
    }

    componentDidMount() {
        this.editor = new E(document.getElementById("wangeditor"));

        // 上传图片
        this.editor.config.uploadImgServer = '/api/upload';
        this.editor.config.uploadFileName = 'myFileName'; // ================这里是关键，后台必须和这里保持一致================ 
        this.editor.config.showLinkImg = false;
        this.editor.config.uploadImgTimeout = 60 * 1000;

        this.editor.config.uploadImgHooks = {
            // 上传图片之前
            //before: function (xhr) {
                // console.log(xhr)

                // 可阻止图片上传
                // return {
                //     prevent: true,
                //     msg: '需要提示给用户的错误信息'
                // }
            //},
            // 图片上传并返回了结果，图片插入已成功
            //success: function (xhr) {
                //console.log('success', xhr)
            //},
            // 图片上传并返回了结果，但图片插入时出错了
            //fail: function (xhr, editor, resData) {
                //console.log('图片上传并返回了结果，但图片插入时出错了')
                //console.log(resData)
            //},
            // 上传图片出错，一般为 http 请求的错误
            //error: function (xhr, editor, resData) {
                //console.log('上传图片出错，一般为 http 请求的错误')
                //console.log('error', xhr, resData)
            //},
            // 上传图片超时
            //timeout: function (xhr) {
                //console.log('timeout')
            //},
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function (insertImg, result) {
                // result 即服务端返回的接口
                console.log('customInsert', result)
                console.log('customInsert')
                console.log(result)

                //var c = result.data[0].imgPath
                insertImg(insertImg);
                //insertImg("https://x0.ifengimg.com/res/2021/21921B99567A8C981CD0503086C2956B68888571_size381_w1200_h856.jpeg") //根据返回的图片路径，将图片插入到页面中，回显
            }
        }

        /**一定要创建 */
        this.editor.create()

        this.editor.txt.html('<p>用 JS 设置的内容</p>') // 重新设置编辑器内容
    }

    render() {
        return (
            <div>
                <div id="wangeditor"></div>
                <Space>
                    <Button type="primary" onClick={() => this.getHtml()}>获取html方法1</Button>
                    <Button type="primary" onClick={() => this.getHtml1()}>获取html方法2</Button>
                    <Button type="primary" onClick={() => this.getText()}>获取text方法</Button>
                </Space>
            </div>
        )
    }
}

1
2
this.editor.config.uploadImgServer = '/api/upload';
this.editor.config.uploadFileName = 'myFileName'; // 这里是关键，后台必须和这里保持一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const express = require("express")
const fs = require("fs")
const mysql = require("mysql")
const util = require("util")
const { getNow } = require("./tool")

const app = express();

var multer = require('multer');//获得中间件
var upload = multer({dest:'uploads/'});//指定配置项，这里指定文件保存于当前目录下的upload子目录
app.use(upload.single('myFileName'));//运用中间件，并且指明文件名,此名需要同html input name的文件名一致，否则会报错

const bodyParser = require("body-parser");
const { nextTick } = require("process");
app.use("/static/", express.static("./static/"));
app.use('/node_modules/', express.static('./node_modules/'));
app.engine("html", require("express-art-template"))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// 渲染页面
app.get("/index", (req, res) => {
    res.render("index.html");
})

app.post("/api/upload", (req, res) => {
    res.jsonp({
        ret: false,
        total: 0,
        rows: [],
        msg: ""
    });
})


app.get("/404", (req, res) => {
    res.render("404.html");
})

// 配置一个全局错误处理中间件
app.use(function (err, req, res, next) {
    res.status(500).json({
        err_code: 500,
        message: err.message
    })
})

app.listen(5555, () => {
    console.log("服务启动成功......");
})

1
app.use(upload.single('myFileName'));//运用中间件，并且指明文件名,此名需要同html input name的文件名一致，否则会报错

1
2
3
4
5
6
7
8
app.post("/api/upload", (req, res) => {
    res.jsonp({
        ret: false,
        total: 0,
        rows: [],
        msg: ""
    });
})