使用Buffer上传至AWS S3的图片无法正常显示（浏览器显示为小白块）问题排查求助

你的问题核心在于服务器端没有正确解析客户端发送的FormData格式请求，直接把包含表单边界标识、文件头的完整请求体当成了图片二进制内容上传到S3，导致S3存储的不是纯图片文件，浏览器自然无法正常渲染。

具体问题分析 #

客户端用FormData上传图片时，请求体是multipart/form-data格式——里面不仅包含图片二进制，还有分隔边界、文件元信息（比如文件名、MIME类型）等额外内容。你直接将req.body转成Buffer上传，相当于把这些无关信息也塞进了图片文件里，最终S3里的文件本质是一个表单数据包，而非有效的图片。

分步解决方案 #

1. 为Next.js API路由配置FormData解析

Next.js默认的body parser不支持multipart/form-data，所以需要先禁用默认解析，再用第三方库formidable来处理文件上传。

首先安装依赖：

npm install formidable
# 或者
yarn add formidable

2. 修正服务器端API代码

import { IncomingForm } from 'formidable';
import AWS from 'aws-sdk';
import fs from 'fs/promises';
import path from 'path';

// 禁用Next.js默认的body parser，因为要处理multipart/form-data
export const config = {
  api: {
    bodyParser: false,
  },
};

// 建议用环境变量存储密钥，不要硬编码！
const s3 = new AWS.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
});

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

  const form = new IncomingForm();
  
  form.parse(req, async (err, fields, files) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }

    const imageFile = files.image;
    if (!imageFile) {
      return res.status(400).json({ message: '未上传图片文件' });
    }

    // 读取真正的图片二进制内容
    const fileBuffer = await fs.readFile(imageFile.filepath);

    const params = {
      Bucket: "你的Bucket名称",
      // 保留原文件扩展名，避免格式不匹配
      Key: `${Date.now().toString()}${path.extname(imageFile.originalFilename)}`,
      Body: fileBuffer,
      // 使用文件本身的MIME类型，不要硬编码
      ContentType: imageFile.mimetype,
      ACL: 'public-read', // 若需要公开访问则添加，否则可移除
    };

    try {
      const data = await s3.upload(params).promise();
      console.log(`文件上传成功：${data.Location}`);
      return res.status(200).json({ imageUrl: data.Location });
    } catch (uploadErr) {
      console.error('上传失败：', uploadErr);
      return res.status(500).json({ error: uploadErr.message });
    }
  });
}

3. 优化客户端代码（可选，增加错误处理）

const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
  const { files } = e.target;
  const formData = new FormData();
  if (files && files[0]) {
    formData.append("image", files[0]);
    try {
      const response = await fetch("/api/upload.image", {
        method: "POST",
        body: formData,
      });
      if (!response.ok) {
        throw new Error('上传请求失败');
      }
      const result = await response.json();
      console.log('图片上传完成：', result.imageUrl);
    } catch (err) {
      console.error('上传出错：', err);
      // 这里可以添加用户提示，比如弹窗告知上传失败
    }
  }
};

额外注意事项 #

• 密钥安全：永远不要在代码里硬编码AWS密钥，用Next.js环境变量（.env.local文件）存储更安全。
• 格式匹配：不要硬编码ContentType为image/png，用文件本身的MIME类型可以兼容jpg、png等多种格式。
• 异步处理：用async/await代替回调函数，代码可读性和错误处理能力更强。

内容的提问来源于stack exchange，提问作者andrey.shedko