我目前在我的Next.js应用程序中遇到了一个挑战，当我试图上传更大的图像（大于1 MB）时。虽然应用程序在较小的图像上运行得很顺利，但引入更大的图像会带来困难。
以前，该问题导致浏览器控制台错误，特别是GET net：ERR_INVALID_URL错误。更新后，该错误得到解决，但新的挑战出现-无法预览大尺寸base64图像。
我在代码中实现了一个基本的工作流程：
1.上传图片=> POST到API/ endpoint =>接收图片响应=>在前端预览显示响应。
环境：

• 节点：18.16.1
• 下一页：14.0.2
• React：18.2.0
• React-dom：18.2.0

虽然使用其他图像服务或multer等替代方案是可用的，但我目前的重点是了解为什么会发生这个问题。
CodeSandbox：Sandbox Link
主要目的：

• 从Next.js API成功进行映像POST [CN]
• 从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在高达1 MB的范围内是可见的，但超过该限制，字符串大小变得太大，从而阻碍了完整的图像渲染。
进一步查询：我对优化图像预览也很感兴趣。在从API获得base64图像响应以在前端显示后，是否有方法呈现较小尺寸的预览（小于1 MB），以便在不影响质量的情况下更快地加载？”