Next.js文件上传时二进制文件内容变更、体积缩小问题排查求助

Next.js API路由默认开启的bodyParser中间件会自动将请求体按UTF-8编码解析为字符串，这就是你遇到问题的核心：

• 纯文本文件内容符合UTF-8编码规则，解析后内容不会发生变化，所以上传正常
• 图片等二进制文件包含大量非UTF-8合法字节，解析过程中会被自动替换、丢弃，最终得到的req.body和原始上传内容不一致，就会出现体积变小、文件损坏的问题。

第一步：修改服务端API路由配置 #

首先禁用默认的bodyParser，手动读取原始二进制请求体，修改后的服务端代码如下：

export const config = {
  api: {
    bodyParser: false, // 关闭默认的body解析
  },
};

export default function handler(req, res) {
  // 手动读取原始请求体Buffer
  const chunks = [];
  req.on('data', (chunk) => {
    chunks.push(chunk);
  });

  req.on('end', () => {
    const fileBuffer = Buffer.concat(chunks);
    console.log("接收的文件字节长度", fileBuffer.length); // 和客户端上传的长度完全一致
    // 后续可以直接把fileBuffer传给存数据库的API，或者写入本地文件
    return res.status(200).end();
  });
}

第二步（可选优化）：简化客户端代码 #

你不需要手动用FileReader读取文件为ArrayBuffer，fetch原生支持直接把File对象作为请求体传递，代码可以简化为：

async function onClick(event) {
  event.preventDefault();
  if (!file) return;

  console.log("上传的文件字节长度", file.size);
  await fetch("/api/upload", {
    method: "POST",
    body: file,
    headers: {
      "Content-Type": "application/octet-stream",
    },
  });
  alert("Uploaded!");
}

修改完成后二进制文件上传就不会出现损坏的问题了。

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