node.js项目中wangEditor富文本编辑器上传图片的方法

在服务端安装multer

npm i multer

1.下载wangEditor引入到页面中，在前端页面中引入

<link rel="stylesheet" type="text/css" href="/public/css/wangEditor.css">
<script src="/public/js/wangEditor.js"></script>

<div id="editor" style="height: 500px;"></div>

//配置
<script>
        var E = window.wangEditor
        var editor = new E('#editor')
        //使用base64编码存储图片
        // editor.customConfig.uploadImgShowBase64 = true 
        editor.customConfig.uploadImgServer = '/upload'
        //配置文件参数名（这个参数必需配置，后台用这个值接收图片）
        editor.customConfig.uploadFileName = 'mypic'
        //设置上传图片的header
        editor.customConfig.uploadImgHeaders = {
            'authorization': 'Bearer '+localStorage.token,
            'enctype':'multipart/form-data'
        }
        //监听函数在上传图片的不同阶段做相应处理
        editor.customConfig.uploadImgHooks = {
            success: function (xhr, editor, result) {
                console.log('图片上传并返回结果,图片插入成功')
            },
            fail: function (xhr, editor, result) {
                console.log('图片上传并返回结果，但图片插入错误')
            },
            error: function (xhr, editor) {
                console.log('图片上传出错')
            },
            timeout: function (xhr, editor) {
                console.log('图片上传超时')
            },
            customInsert: function (insertImg, result, editor) {
                // 上传成功 result为后台处理函数返回的数据
                var url = result.data[0].imgPath
                insertImg(url) //根据返回的图片路径，将图片插入到页面中，回显
            }
        }
 editor.create()
</script>

前端已经配置好，我们在后端接受到post /upload路由，就将图片存储在服务器上相应目录中。

2.我们先配置好图片存储的位置。upload.js文件

const fs = require('fs')
const path = require('path')
var multer=require('multer')

const upload = multer({
    storage: multer.diskStorage({       
        //设置文件存储位置
        destination: function (req, file, cb) {
            let dir = "../uploads" //图片存储的目录
            //判断目录是否存在，没有则创建
            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir, {recursive: true});
            }
            //dir就是上传文件存放的目录
            cb(null, dir);
        },
        //设置文件名称
        filename: function (req, file, cb) {
            // 取无后缀的文件名
            let ex_name =  file.originalname.split('.')[0]
            //防止文件名重复，为文件名加上时间戳
            let fileName = ex_name + '-' + Date.now() + path.extname(file.originalname);
            //fileName就是上传文件的文件名
            cb(null, fileName);
        }
    })
})

module.exports = upload

3.文件上传已经配置好，前台页面也搭建好了，wangEditor中只要上传图片或者粘贴图片，都会去/upload这个路由中，我们在后端为这个路由编写相关处理函数，将图片存储并且向前端页面返回相关数据。router中代码如下：

const upload = require('../upload.js')

router.post('/upload',upload.single("mypic"), function (req, res) {
    res.send({
        error:0,
        data:[
            {
             isOK:true,
             imgPath:req.file.path, //文件存储的路径
             imgName:req.file.filename
            }
        ]
    })
 })

当图片上传成功后，图片存在../uploads目录中，同时向页面返回data。页面中拿到data后根据result.data.imgPath可以访问到我们图片的路径，通过insertImg(result.data.imgPath)回显在页面中。如图：

关于为什么我要将data数据配置成{error:0,data:[]}这样的形式，我们可以在wangEditor官网看到如下说明