探索大小限制：API 响应 Base64 可查看高达 1 MB，渲染挑战

Question

我做错了什么！

我的 Next.js 应用程序在上传较大图像（大于 1 MB）时遇到问题。该应用程序适用于较小的图像，但当我尝试上传较大的图像时，

之前：

it sometimes results in a browser console error, specifically a GET net:ERR_INVALID_URL error.

更新：

no error, not able to preview all size base64 image

我尝试了一个简单的样板代码，其中： 上传图像 => POST api/ 端点 => 返回图像响应 => 在 FE 中将响应显示为预览

    "Node": "18.16.1",
    "next": "14.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",

• 我知道我可以使用其他图像服务并且将来我会使用或者我可以使用 multer 但现在我很想知道更多为什么它会这样

代码沙箱： https://codesandbox.io/p/sandbox/wonderful-hill-zc3n65

基本只是或测试，

• 应该能够从 next.js api/ POST [已检查]
发布图像
• 从 api 获取图像作为对 FE 的响应，没有错误 [已检查]
• 从 next.js api POST 响应渲染图像或预览的更好方法

更新！ 可以避免GET ERROR

async function getImageBuffer(base64String: string): Promise<Buffer> {
  // If it's a base64 string, decode it
  return Buffer.from(base64String.split(",")[1], "base64");
}

在codesandbox api/upload/route.ts中更新

• 我尝试了各种大小，发现 API 响应 base64 最大可达 1 MB。超过此限制，字符串大小会变得太大，从而导致图像无法完整渲染。

补充问题： 我也对优化图像预览感到好奇。从 API 检索图像并在前端显示后，是否可以显示较小尺寸（小于 1 MB）的预览，以便在不影响质量的情况下加快加载速度？

Answer 1

您将图像作为 base64 编码的图像数据 url 返回。

这意味着当您上传 1MB 的图像时，您将返回一个包含大约 130 万个字符的 URL。

虽然最大 URL 长度规范中没有技术限制，但浏览器通常有硬性限制。

几年前，普遍的建议是 URL 中的字符数保持在 2k 个字符以下。老实说，我很惊讶 Chrome 在告诉您 URL 无效之前已经达到了接近 100 万个字符。