Node.js下EasyMDE本地图片上传：如何获取图片数据？

尝试使用EasyMDE的本地图片上传功能，但找不到可用的Node.js示例。能接收到POST请求，但不清楚如何在req对象中找到实际图片数据以保存到磁盘。

客户端代码 #

const easyMDE = new EasyMDE({
  element: document.getElementById('my-text-area'),
  autofocus: true,
  shortcuts: {
    drawTable: "Cmd-Alt-T"
  },
  hideIcons: ['image'],
  showIcons: ["code", "table", "upload-image"],
  uploadImage: true,
  imageUploadEndpoint: "imageUpload",
});

初始服务端代码 #

router.post("/imageUpload", async (req, res) => {
  console.log('receiving image...');
});

EasyMDE上传图片时采用multipart/form-data格式发送请求，Node.js原生无法直接解析该格式，需借助multer中间件处理文件上传。

1. 安装multer #

npm install multer

2. 配置multer并更新路由 #

const express = require('express');
const router = express.Router();
const multer = require('multer');
const path = require('path');
const fs = require('fs');

// 确保上传目录存在，不存在则创建
const uploadDir = path.join(__dirname, '../public/uploads');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免冲突
    const uniqueName = `${Date.now()}-${Math.round(Math.random() * 1E9)}${path.extname(file.originalname)}`;
    cb(null, uniqueName);
  }
});

const upload = multer({ storage });

// 处理图片上传请求
router.post("/imageUpload", upload.single('image'), (req, res) => {
  // req.file包含上传图片的完整信息
  console.log('上传的图片信息:', req.file);

  // 返回EasyMDE要求的响应格式
  res.json({
    success: true,
    url: `/uploads/${req.file.filename}` // 根据你的静态文件服务路径调整
  });
});

补充配置 #

需要在Express应用中添加静态文件服务，让上传的图片可以被访问：

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

内容的提问来源于stack exchange，提问作者larrybg