Node.js中获取CKEditor4带图片内容及详情页图片不显示问题求助

问题根因 #

你存入数据库的blob:前缀链接是CKEditor在编辑页临时生成的浏览器本地内存引用，仅对当前页面会话有效，一旦页面刷新、跳转或跨会话访问就会失效，这就是编辑页能正常显示、详情页图片加载失败的核心原因。

具体解决步骤 #

1. 调整CKEditor配置，新增图片上传接口 #

修改CKEditor初始化参数，指定后端图片上传地址，让用户插入的图片先上传到服务端，再替换成永久可用的URL，而非直接存临时blob链接：

CKEDITOR.replace('你的编辑器容器ID', {
  // 保留你原有配置项
  filebrowserUploadUrl: '/api/upload/ckeditor-image', // 换成你的后端上传接口路径
  filebrowserUploadMethod: 'form'
});

2. 实现Node.js端图片上传逻辑 #

用express + multer实现上传接口，把图片存到服务端静态目录（或云存储）后返回永久访问路径：
首先安装依赖：

npm install multer

编写接口代码：

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

// 配置静态资源目录，后续上传的图片可以直接通过路径访问
app.use(express.static('public'));

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/uploads/images'); // 提前在项目下创建这个目录
  },
  filename: (req, file, cb) => {
    // 生成不重复的文件名避免覆盖
    const fileName = `${Date.now()}_${Math.floor(Math.random() * 1000)}_${file.originalname}`;
    cb(null, fileName);
  }
});
const upload = multer({ storage: storage });

// CKEditor图片上传接口
app.post('/api/upload/ckeditor-image', upload.single('upload'), (req, res) => {
  // 拼接图片的可访问URL
  const imgUrl = `/uploads/images/${req.file.filename}`;
  // 返回CKEditor要求的格式
  res.json({
    uploaded: true,
    url: imgUrl
  });
});

3. 处理历史存量数据（可选） #

如果之前已经存入了不少带临时blob链接的文章，可以写个批量处理脚本：遍历posts表的content字段，把所有src="blob:http://xxx"的内容替换成你上传后的有效链接，也可以根据需求过滤掉无效的blob引用。

4. 详情页渲染逻辑无需修改 #

你当前用的<%- post.content %>渲染方式是正确的，只要content字段内存储的是永久有效的图片URL，详情页就能正常加载展示图片。

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