Express.js集成CKEditor5时图片上传失败的问题求助

Multer抛出Unexpected field错误的核心原因是你配置的Multer字段名和CKEditor5上传时发送的字段名不匹配，以下是具体解决步骤：

1. 明确CKEditor5的默认上传字段名 #

CKEditor5（搭配CKFinder适配器）默认会将图片文件放在名为upload的FormData字段中，而非你可能自定义的image或其他名称。

2. 修正Multer配置 #

将Multer的字段名参数改为upload，示例代码如下：

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

// 配置静态文件服务，确保上传的图片能被访问
app.use(express.static('public'));

// 配置Multer的存储路径和文件名规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 确保public/uploads目录已手动创建，Multer不会自动生成目录
    cb(null, path.join(__dirname, 'public/uploads'));
  },
  filename: (req, file, cb) => {
    const uniqueName = `${Date.now()}-${Math.random().toString(36).slice(2)}${path.extname(file.originalname)}`;
    cb(null, uniqueName);
  }
});

// 关键：这里的字段名必须是'upload'，和CKEditor5的默认字段匹配
const uploadMiddleware = multer({ storage }).single('upload');

// 处理图片上传的接口
app.post('/upload-image-endpoint', (req, res) => {
  uploadMiddleware(req, res, (err) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }
    // CKEditor5要求返回固定格式的JSON响应
    res.json({
      uploaded: true,
      url: `/uploads/${req.file.filename}`
    });
  });
});

3. 确认前端CKEditor配置无误 #

确保EJS中的CKEditor配置正确指向你的上传接口，无需修改默认字段名：

ClassicEditor
  .create(document.querySelector('#editor'), {
    ckfinder: {
      uploadUrl: '/upload-image-endpoint'
    }
  })
  .catch(err => console.error(err));

额外注意事项 #

• 必须手动创建上传目录（比如public/uploads），否则Multer会因找不到目录而报错。
• 确保你的Express应用已配置静态文件服务，否则前端无法访问上传后的图片。
• 检查请求的Content-Type是否为multipart/form-data，CKEditor5默认会自动设置，无需额外配置。

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