探索大小限制：API 响应 Base64 可查看，最大 1 MB，呈现挑战

问：

我目前在尝试上传较大图像（大于 1 MB）时在 Next.js 应用程序中面临挑战。虽然该应用程序在处理较小图像时运行流畅，但引入较大图像会带来困难。

以前，该问题会导致浏览器控制台错误，特别是 GET net：ERR_INVALID_URL 错误。更新后，该错误已得到解决，但出现了一个新的挑战——无法预览大尺寸的 base64 图像。

我在代码中实现了一个基本的工作流程：

1. 上传图像 => POST 到 api/ 端点 => 接收图像响应 => 在前端显示响应作为预览。

环境：

• 节点：18.16.1
• 下一步： 14.0.2
• 反应：18.2.0
• 反应多元：18.2.0

虽然可以使用其他图像服务或 multer 等替代方案，但我目前的重点是了解为什么会出现此问题。

CodeSandbox：沙盒链接

主要目标：

• 从 Next.js API 成功进行映像 POST [已检查]
• 从 API 接收图像作为前端的响应，而不会出现错误 [已选中]
• 探索从 Next.js API POST 响应渲染图像或预览的改进方法。

更新： 我已经对其中的函数进行了调整，以避免GET错误：getImageBufferapi/upload/route.ts

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）以加快加载速度？