如何在Next.js+MongoDB+Mongoose中实现Amazon S3图片删除功能？

问题背景 #

当前已实现图片上传到S3的功能，但现有的deleteImage函数仅能从前端移除图片链接，无法真正删除S3桶中的文件。需要创建对应的API路由并修改前端函数，完成后端删除操作。

解决方案 #

1. 创建delete.js API路由 #

在pages/api目录下新建delete.js文件，使用AWS SDK的DeleteObjectCommand完成S3文件删除：

import { S3Client, DeleteObjectCommand } from "@aws-sdk/client-s3";

const bucketName = "ecommerce";

export default async function handle(req, res) {
  if (req.method !== "DELETE") {
    return res.status(405).json({ message: "仅支持DELETE请求" });
  }

  const { imageUrl } = req.body;
  if (!imageUrl) {
    return res.status(400).json({ message: "缺少图片URL参数" });
  }

  // 从S3链接中提取文件Key（例如从https://ecommerce.s3.amazonaws.com/12345.jpg提取12345.jpg）
  const key = imageUrl.split(`${bucketName}.s3.amazonaws.com/`)[1];
  if (!key) {
    return res.status(400).json({ message: "无效的S3图片URL" });
  }

  const client = new S3Client({
    region: "us-west-1",
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
  });

  try {
    await client.send(
      new DeleteObjectCommand({
        Bucket: bucketName,
        Key: key,
      })
    );
    return res.status(200).json({ message: "图片删除成功" });
  } catch (error) {
    console.error("S3删除错误:", error);
    return res.status(500).json({ message: "删除图片失败", error: error.message });
  }
}

2. 修改前端deleteImage函数 #

将原同步函数改为异步，先调用API删除S3文件，成功后再更新前端状态：

const deleteImage = async (index) => {
  const imageToDelete = images[index];
  try {
    // 调用删除API
    await axios.delete("/api/delete", {
      data: { imageUrl: imageToDelete }
    });
    // 仅当后端删除成功后，更新前端图片列表
    setImages(prev => prev.filter((_, i) => i !== index));
  } catch (error) {
    console.error("删除图片失败:", error);
    alert("删除图片失败，请重试");
  }
};

3. 关键注意事项 #

• IAM权限配置：确保你的S3访问密钥拥有s3:DeleteObject权限，否则会出现权限错误。
• 请求合法性校验：API路由中校验请求方法为DELETE，避免非法请求触发删除操作。
• 状态一致性保障：仅在后端删除成功后再更新前端状态，避免出现前端已删除但S3文件仍存在的不一致情况。

内容的提问来源于stack exchange，提问作者Chris Ware Codes