使用Replicate模型与Next.js时遇JSON语法错误求助

1. 修正API路由的请求解析配置 #

Next.js默认会把请求体按JSON解析，而FormData属于multipart/form-data格式，强行用JSON解析就会触发语法错误。需要在API路由文件中关闭默认的JSON解析器：

export const config = {
  api: {
    bodyParser: false,
  },
};

export async function POST(request: Request) {
  // 用原生FormData解析请求体
  const formData = await request.formData();
  const image = formData.get('image') as File;
  const prompt = formData.get('prompt') as string;

  // 后续调用Replicate API的逻辑
}

2. 检查前端FormData的发送逻辑 #

确保前端没有错误地将FormData转为JSON发送，直接传递FormData作为请求体：

const formData = new FormData();
formData.append('image', selectedFile);
formData.append('prompt', inputPrompt);

const response = await fetch('/api/your-endpoint', {
  method: 'POST',
  body: formData, // 直接传FormData，不要用JSON.stringify处理
});

3. 验证Replicate API的参数格式 #

• 确认visoar/product-photo模型的输入要求：该模型是否接受原始File对象，还是需要将图片转为Base64编码？如果是后者，需要在前端或后端对图片进行转换。
• 检查prompt内容是否包含未转义的特殊字符（如双引号、换行符），这类字符会导致JSON序列化失败，可提前对prompt做转义处理。

4. 定位错误的具体来源 #

在API路由中打印原始请求体，确认错误是前端发送格式问题还是后端解析问题：

export async function POST(request: Request) {
  const rawBody = await request.text();
  console.log('原始请求体:', rawBody);
  // 后续逻辑
}

如果打印内容是FormData的边界符格式（如------WebKitFormBoundaryXXX），说明后端解析配置错误；如果是混乱的JSON字符串，说明前端发送逻辑有误。

5. 确认模型版本的输入兼容性 #

虽然使用了固定版本edf42659dae0da88a26dba4912e7e4bb6c2fba25b1e1c6a5464cf220e467bce0，但可核对Replicate上该版本的输入参数定义，确认是否和你之前使用的模型参数格式一致。

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