Next.js API中Jimp生成的BMP图片上传至Vercel Blob后下载为0B的问题排查求助

阿华AIGC实验室

2026-3-31

我来帮你排查这个问题！从你的描述和代码来看，问题大概率出在Buffer的传递方式或者Vercel Blob的put方法对数据的处理上，咱们一步步来解决：

1. 优先尝试：将Buffer转为标准Blob对象上传

Vercel Blob的put方法虽然文档说支持Buffer，但实际测试中，部分特定格式（比如BMP）直接传Buffer可能会出现隐式转换导致的数据丢失。试试把Buffer包装成浏览器标准的Blob对象再传递：

// 替换原有的put调用代码
const uploadBlob = new Blob([buffer], { type: "image/bmp" });
const { url } = await put('dashboard.bmp', uploadBlob, { 
  access: 'public', 
  contentType: "image/bmp", 
  allowOverwrite: true
});

2. 验证Buffer的完整性与一致性

你本地写入磁盘的文件正常，说明Buffer本身没问题，但可以在上传前加个长度校验，对比Vercel Blob控制台显示的文件大小：

console.log('Buffer实际长度:', buffer.length); // 比如本地写入的是1.126MB，对应长度应该是1184768左右

如果控制台的长度和Vercel显示的1.15MB偏差过大，说明数据在传递过程中被截断了。

3. 明确指定Jimp的MIME类型

虽然你用了JimpMime.bmp，但可以直接用字符串'image/bmp'替换，避免Jimp的常量定义可能存在的问题：

const buffer = await image.getBuffer('image/bmp');

4. 检查`take_screenshot`的返回值

确保take_screenshot返回的是有效的图片数据（Buffer、合法路径或URL），可以加个简单校验：

let screenshot = await take_screenshot();
console.log('screenshot类型:', typeof screenshot, '数据长度:', screenshot?.length);

如果返回的是undefined或者空数据，那后续的Jimp处理也会出问题。

5. 本地开发环境的特殊情况

你在npm run dev下测试时，Vercel Blob的本地模拟器可能存在缓存或同步问题，建议把代码部署到Vercel预览环境测试，看是否还是0B文件。

修改后的完整示例代码

import { Jimp } from "jimp";
import { put } from "@vercel/blob";

export async function GET(request) {
  try {
    let screenshot = await take_screenshot();
    console.log('screenshot状态:', screenshot?.length ? `长度${screenshot.length}字节` : '无有效数据');
    
    const image = await Jimp.read(screenshot);
    image.greyscale();
    
    // 明确指定MIME类型
    const buffer = await image.getBuffer('image/bmp');
    console.log('待上传Buffer长度:', buffer.length);
    
    // 转为标准Blob对象
    const uploadBlob = new Blob([buffer], { type: "image/bmp" });
    const { url } = await put('dashboard.bmp', uploadBlob, { 
      access: 'public', 
      contentType: "image/bmp", 
      allowOverwrite: true
    });
    
    console.log('上传成功，访问URL:', url);
    return new Response(JSON.stringify({ success: true, url }), { status: 200 });
  } catch (error) {
    console.error('上传失败详情:', error);
    return new Response(JSON.stringify({ success: false, error: error.message }), { status: 500 });
  }
}