使用 formdata 发布图像时出错：“NotSupportedError：不支持 multipart/form-data”

Question

我正在使用 Next.js 版本 13.4.1 并尝试使用multipart/form-data. 但是，当尝试这样做时，我收到一条错误消息，指出不支持该格式。我已经看到一些博客和其他开发人员成功地使用了此方法，因此我相信这可能是我的代码或 Next.js 本身中的错误。

我正在项目的应用程序目录中工作，并尝试将图像文件发布到服务器。在我的前端代码中，我已经实现了处理图像上传所需的功能。、handleDragOver、handleDragLeave和handleDrop功能允许用户将图像拖放到指定区域。然后，create 函数处理表单提交，创建 FormData 的新实例并设置适当的值。

前端

const handleDragOver = (event: any) => {
    event.preventDefault();
    setDragOver(true);
};

const handleDragLeave = (event: any) => {
    event.preventDefault();
    setDragOver(false);
};

const handleDrop = (event: any) => {
    event.preventDefault();
    setDragOver(false);
    const file = event.dataTransfer.files[0];
    setImage(file);
};

const create = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!image) {
        return;
    }

    const formData = new FormData();

    formData.set("name", name);
    formData.set("url", url);
    formData.set("image", image, image.name);

    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/category`, {
        method: "POST",
        body: formData,
    });
    const data = await response;
    console.log(data);
};

后端

在后端，我实现了一个 POST 函数来处理请求。在此函数中，我尝试使用该request.formData()方法检索表单数据。

import prisma from "@/libs/prisma";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const formData = await request.formData();
  console.log(formData);
}

但是，当我提交表单时，我收到一条错误消息，指出不支持 multipart/form-data 格式。我已经对照其他在线示例检查了我的代码，没有发现任何明显的问题。我怀疑这可能是 Next.js 中的错误或我的特定设置的兼容性问题。

我尝试了几种解决方案来解决使用 multipart/form-data 将文件发布到服务器时遇到的问题。首先，我尝试使用一些博客文章中建议的库，但它不起作用。然后，我尝试更新所有依赖项，包括 Next.js 版本，但问题仍然存在。我什至试图在 Next.js 的官方 Discord 服务器和互联网上找到解决方案，但我无法找到任何令人满意的答案。

我期望找到一个解决方案，允许我使用 multipart/form-data 成功地将文件发布到服务器。然而，尽管尝试了多种解决方案，我仍然无法解决该问题。我仍在积极寻找解决方案，并将继续探索不同的选项，直到能够成功地将文件发布到服务器。

错误：

- error NotSupportedError: multipart/form-data not supported
    at NextRequest.formData (node:internal/deps/undici/undici:2383:19)
    at POST (webpack-internal:///(sc_server)/./src/app/api/category/route.ts:31:36)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:43)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:109:36)     
    at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
    at NoopTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:953:34)
    at ProxyTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:993:36)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:98:107)     
    at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30)
    at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58)
    at NextTracerImpl.trace (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:98:32)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:232:53)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:39:24)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:186:97)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:77:24)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:185:75)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at AppRouteRouteModule.execute (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:182:56)
    at AppRouteRouteModule.handle (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:333:41)
    at RouteHandlerManager.handle (C:\Users\xxx\OneDrive\Plocha\skaut-frystak\node_modules\next\dist\server\future\route-handler-managers\route-handler-manager.js:28:29)
    at doRender (C:\Users\xxx\OneDrive\Plocha\skaut-frystak\node_modules\next\dist\server\base-server.js:935:58)
    at cacheEntry.responseCache.get.incrementalCache.incrementalCache (C:\Users\xxx\OneDrive\Plocha\skaut-frystak\node_modules\next\dist\server\base-server.js:1161:34)
    at C:\Users\xxx\OneDrive\Plocha\skaut-frystak\node_modules\next\dist\server\response-cache\index.js:99:42
    at ResponseCache.get (C:\Users\xxx\OneDrive\Plocha\skaut-frystak\node_modules\next\dist\server\response-cache\index.js:149:11)
    at DevServer.renderToResponseWithComponentsImpl (C:\Users\xxx\OneDrive\Plocha\skaut-frystak\node_modules\next\dist\server\base-server.js:1080:53)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'UND_ERR_NOT_SUPPORTED'
}

Answer 1

经过一番研究，我发现问题出在我使用的 NodeJS 版本上。我运行的是版本 18.10，但是当我升级到版本 20.1.0（这是撰写本文时的当前版本）时，formData 开始工作。

看来这个问题与 NodeJS 版本有关。我建议尝试升级到最新版本，看看是否可以解决将来人们的问题。您可以从 NodeJS 官方网站下载它。