如何在NextJs上停止大文件上传

Question

我正在 NextJs 中编写一个应用程序，它有一个上传图像的表单。 图像文件大小应该受到限制，因此当然有客户端限制文件大小的代码，但正如您所知，这些限制可以轻松跳过。所以我想在服务器端也限制文件大小上传。我使用服务器操作来处理表单数据，问题是在图像有效传输到服务器之前我无法获取文件信息。我想要的是立即中止文件发送，为此我创建了一个中间件，该中间件可以拦截检查内容长度的帖子，并在内容长度超过某个特定值时返回适当的错误。这样的标头验证会立即发生，不会发生文件上传，但直到文件上传后才会将响应发送到客户端。

中间件.js

import { NextResponse } from "next/server";

const MAX_CONTENT_LENGTH = 10000;

export async function middleware(request) {
    if (request.method === "POST") {
        if (request.url.endsWith("/meals/share")) {
            const contentLength = +request.headers.get("Content-Length");
            if (contentLength > MAX_CONTENT_LENGTH) {
                return NextResponse.json(
                    {
                         message: `Images cannot be larger than ${MAX_CONTENT_LENGTH}`,
                     },
                     { status: 400 }
                 );
            }
        }
    }
    return NextResponse.next();
}

这段代码可以工作，但是有我提到的缺陷，文件无论如何都会上传，我已经用非常大的文件（10GB）验证了这个测试上传，并且响应延迟与文件大小成正比。 问题是如何中止文件上传以便立即返回响应？

Answer 1

在express中，

multer

库用于处理尺寸。 next.js 有 bodysizelimit

默认情况下，发送到服务器的请求正文的最大大小 Action为1MB，防止服务器消耗过多 解析大量数据的资源以及潜在的 DDoS 攻击。

但是，您可以使用以下命令配置此限制 serverActions.bodySizeLimit 选项。它可以占用字节数或 字节支持的任何字符串格式，例如 1000、'500kb' 或 ‘3mb’。

// next.config.js
module.exports = {
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
}