Vercel Blob存储的图片文件损坏问题求助

使用Vercel Blob存储文件时，所有类型文件均可成功上传并通过Vercel界面下载，但仅PNG/JPG/JPEG类型图片下载后无法打开（显示损坏），PDF等其他文件则完全正常。

已按照教程部署API，通过Postman发送POST请求（form-data格式）上传文件，上传请求返回成功，但图片文件损坏。

相关代码 #

上传API代码（Next.js） #

app.post('/upload', async (_req: Request) => {
  const request: Request = _req;
  await handler(request);
})

// Works for PDFs when Postman is in form-data and Value has the PDF file
// Does not work for images
export async function handler(request: Request): Promise<NextResponse> {
  const { searchParams } = new URL(request.url);
  const filename = searchParams.get('filename');

  const blob = await put(filename, request, {
    access: 'public'  
  });

  return NextResponse.json(blob);
}

Postman导出的Node.js请求代码 #

var request = require('request');
var fs = require('fs');
var options = {
  'method': 'POST',
  'url': '<remote>/upload',
  'headers': {
  },
  formData: {
    '': {
      'value': fs.createReadStream('/home/.../Downloads/tiny_spaces.png'),
      'options': {
        'filename': 'tiny_spaces.png',
        'contentType': null
      }
    }
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

核心原因 #

直接将整个request对象传给Vercel Blob的put方法，但当前请求是multipart/form-data格式，request包含了form的边界（boundary）、字段描述等额外内容，并非纯文件二进制数据。PDF因格式特性可忽略这些额外内容正常打开，但图片是严格二进制格式，额外内容会直接导致文件损坏。

修复步骤 #

1. 解析form-data，提取纯文件内容
   使用Next.js内置工具解析form-data，拿到实际的文件对象后再传给put方法：

   import { put } from '@vercel/blob';
   import { NextResponse } from 'next/server';
   import { parseMultipartFormData } from 'next/dist/server/app-render/utils';
   
   export async function handler(request: Request): Promise<NextResponse> {
     const { searchParams } = new URL(request.url);
     const filename = searchParams.get('filename');
   
     // 解析multipart/form-data请求
     const formData = await parseMultipartFormData(request);
     // 匹配Postman中设置的空字段名，提取文件对象
     const file = formData.get('') as File;
   
     // 将纯文件对象传给put方法
     const blob = await put(filename, file, {
       access: 'public'
     });
   
     return NextResponse.json(blob);
   }
   

2. 优化Postman请求配置

   • 删除contentType: null设置，让Postman自动识别图片的MIME类型（如image/png），避免格式混淆；
   • 确保form-data的字段名和后端解析时的名称一致（当前为空字段名，对应后端formData.get('')）。

调试建议 #

• 对比文件大小：检查本地原图片大小和Vercel Blob中存储的文件大小，若后者更大，说明确实存储了form-data的额外内容；
• 查看文件内容：用文本编辑器打开损坏的图片，若开头出现--boundary之类的form分隔符，直接确认是form-data未解析的问题；
• 测试纯二进制上传：在Postman中切换到Body->Binary模式上传图片，此时直接传request给put应能正常工作，进一步验证form-data解析是问题核心。

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