Next.js大图片上传预览问题：1MB以上Base64渲染障碍及优化问询

问题描述 #

我在Next.js应用中上传大于1MB的图片时遇到异常：小图片能正常运行，大图片会出问题。之前浏览器控制台报GET net:ERR_INVALID_URL错误，修复后又出现大尺寸Base64图片无法预览的新问题。

实现流程 #

• 上传图片
• POST请求至api/端点
• 接收图片响应
• 前端显示预览

环境配置 #

• Node: 18.16.1
• Next: 14.0.2
• React: 18.2.0
• React-dom: 18.2.0

注：目前暂不考虑其他图片服务或multer等替代方案，重点聚焦当前问题的成因。

核心目标 #

• ✅ 成功从Next.js API POST图片
• ✅ 前端无错误接收API返回的图片
• 探索从Next.js API POST响应渲染图片或预览的改进方法

更新记录 #

已调整api/upload/route.ts中的getImageBuffer函数解决了GET错误，代码如下：

async function getImageBuffer(base64String: string): Promise<Buffer> {
  // Decode the base64 string
  return Buffer.from(base64String.split(",")[1], "base64");
}

当前剩余问题 #

API返回的Base64仅在图片≤1MB时能正常渲染，超过该大小后因字符串过大，无法完整渲染图片。

进一步疑问 #

获取API返回的Base64图片后，能否在前端生成小于1MB的预览图，实现快速加载且不损失画质？

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