React集成CKEditor：删除编辑器图片同步删除AWS S3文件方案咨询

这个场景我之前在项目里也碰到过——图片上传到S3很顺畅，但编辑器里删图后S3的冗余文件越积越多。核心思路就是追踪哪些图片还存在于最终的编辑器内容中，批量清理掉被移除的那些。下面给你两种可行的方案，从快速实现到生产环境推荐的都有：

方案一：前端追踪+调用后端删除（快速验证） #

适合小型项目或快速验证需求，核心是在React组件里维护上传过的图片列表，对比当前编辑器内容里的图片，找出要删除的冗余文件。

1. 维护上传图片的状态 #

每次图片上传成功后，把返回的S3链接存到组件状态中：

import { useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const EditorComponent = () => {
  const [uploadedImages, setUploadedImages] = useState([]);
  const [editorInstance, setEditorInstance] = useState(null);

  // 自定义CKEditor图片上传回调（假设你已实现S3上传逻辑）
  const handleImageUpload = async (file) => {
    // 调用S3上传接口，获取图片的S3访问链接
    const imageUrl = await uploadToS3(file);
    // 将新上传的图片链接加入状态
    setUploadedImages(prev => [...prev, imageUrl]);
    // 返回CKEditor需要的格式
    return { default: imageUrl };
  };

  // 配置CKEditor的上传适配器
  const editorConfiguration = {
    image: {
      upload: {
        adapter: {
          upload: handleImageUpload
        }
      }
    }
  };

2. 提取当前编辑器中的图片链接 #

写一个工具函数，从CKEditor的HTML内容里解析出所有<img>标签的src属性：

const extractCurrentImages = (editorContent) => {
  if (!editorContent) return [];
  const parser = new DOMParser();
  const doc = parser.parseFromString(editorContent, 'text/html');
  return Array.from(doc.querySelectorAll('img')).map(img => img.src);
};

3. 在保存时对比并删除冗余图片 #

当用户点击保存按钮时，对比上传记录和当前内容里的图片，调用后端接口删除多余的S3文件：

const handleSave = async () => {
  if (!editorInstance) return;
  
  // 获取编辑器当前的HTML内容
  const currentContent = editorInstance.getData();
  // 提取当前内容中存在的图片链接
  const currentImages = extractCurrentImages(currentContent);
  
  // 找出被删除的图片：上传过但不在当前内容里的链接
  const imagesToDelete = uploadedImages.filter(url => !currentImages.includes(url));
  
  if (imagesToDelete.length > 0) {
    // 批量调用后端删除接口
    await Promise.all(
      imagesToDelete.map(url => deleteImageFromS3(url))
    );
    // 更新状态，只保留当前内容中存在的图片
    setUploadedImages(currentImages);
  }
  
  // 最后将编辑器内容保存到后端
  await saveContentToBackend(currentContent);
};

// 从S3链接中提取对象键（替换成你的S3桶域名）
const getS3ObjectKey = (imageUrl) => {
  const s3BaseUrl = 'https://your-bucket-name.s3.amazonaws.com/';
  return imageUrl.replace(s3BaseUrl, '');
};

// 调用后端删除接口（前端禁止直接操作S3，会泄露密钥）
const deleteImageFromS3 = async (imageUrl) => {
  const objectKey = getS3ObjectKey(imageUrl);
  await fetch('/api/s3/delete-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: objectKey })
  });
};

方案二：后端统一处理（生产环境推荐） #

前端方案虽然简单，但如果用户篡改前端代码或多终端编辑，容易出现遗漏。更可靠的方式是让后端管理图片与文章的关联关系：

1. 上传图片时关联文章ID #

每次上传图片到S3后，后端把图片的S3对象键和对应的文章ID存入数据库（比如新建一张article_images关联表）。

2. 保存文章时对比清理 #

当保存文章内容时，后端执行以下步骤：

• 从HTML内容中提取所有图片的S3对象键；
• 查询数据库中该文章关联的所有图片键；
• 对比找出不在当前内容里的图片，调用AWS SDK的DeleteObject方法删除S3文件；
• 更新数据库，删除冗余的图片关联记录。

后端示例（Node.js + AWS SDK v3） #

const { S3Client, DeleteObjectCommand } = require("@aws-sdk/client-s3");
const s3Client = new S3Client({ region: 'your-region' });

// 保存文章时的冗余图片清理逻辑
async function cleanRedundantImages(articleId, currentContent) {
  // 1. 从HTML内容中提取当前存在的图片S3对象键
  const currentImageKeys = extractImageKeysFromHtml(currentContent);
  
  // 2. 查询数据库中该文章关联的所有图片键
  const dbImageKeys = await getArticleImagesFromDb(articleId);
  
  // 3. 筛选出需要删除的图片键
  const keysToDelete = dbImageKeys.filter(key => !currentImageKeys.includes(key));
  
  // 4. 批量删除S3中的冗余文件
  await Promise.all(
    keysToDelete.map(key => {
      const command = new DeleteObjectCommand({
        Bucket: 'your-bucket-name',
        Key: key
      });
      return s3Client.send(command);
    })
  );
  
  // 5. 更新数据库，删除冗余的关联记录
  await deleteRedundantImageRecords(articleId, keysToDelete);
}

关键注意事项 #

• 禁止前端直接操作S3：会暴露AWS密钥，引发安全风险，所有S3操作必须通过后端代理完成。
• 上传时使用唯一文件名：比如用UUID拼接原文件名，避免同名文件覆盖或误删。
• 草稿场景特殊处理：如果是保存草稿，建议不要立即删除图片，等最终发布时再清理，避免用户恢复图片后找不到文件。

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