wangeditor上传图片node

Wangeditor是一个轻量级的富文本编辑器，主要用于前端网页上实现富文本编辑功能。如果你想要集成Wangeditor并支持图片上传到Node.js服务器，可以按照以下步骤操作：

1. **安装依赖**：首先在项目中安装`wangeditor`库以及处理文件上传的模块，比如`multer`。使用npm命令行：

   npm install wangeditor multer

2. **配置Wangeditor**：在HTML中引入编辑器的样式和JavaScript，并初始化编辑器实例，通常会提供一个按钮供用户选择文件：

   <link rel="stylesheet" href="wangeditor/css/wangEditor.min.css">
   <script src="wangeditor/js/wangEditor.min.js"></script>
   ...
   <div id="editor" style="width:800px;height:500px;"></div>
   <button onclick="uploadImage()">上传图片</button>

3. **编写上传函数**：在Node.js后端创建一个处理图片上传的API，这一步会涉及到`multer`中间件的使用：

   const express = require('express');
   const multer = require('multer');
   const upload = multer({ dest: 'uploads/' });

   const app = express();

   // 上传图片的路由
   app.post('/upload-image', upload.single('file'), (req, res) => {
       if (!req.file) {
           return res.status(400).send('No file uploaded.');
       }
       // 保存图片到服务器，例如将路径返回给前端
       const imagePath = req.file.path;
       res.send({ url: `/uploads/${imagePath}` });
   });

   // 初始化Wangeditor的上传事件处理器
   function uploadImage() {
       const editor = new WangEditor('#editor');
       editor.config.uploadImgServer = '/upload-image'; // 设置上传图片的API地址
       // 添加图片上传事件监听
       editor.config.imageManager.on('beforeUpload', async img => {
           const formData = new FormData();
           formData.append('file', img.data);
           const result = await fetch(editor.config.uploadImgServer, { method: 'POST', body: formData });
           // 处理上传结果
       });
   }

   app.listen(3000, () => {
       console.log('Server started on port 3000');
   });

4. **处理后端错误和前端响应**：确保在上传过程中处理可能出现的错误，并在前端更新编辑器状态或显示错误信息。