使用表单数据发布图片时出错：“NotSupportedError：不支持多部分/表单数据”

Question

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

我在我的项目的 app 目录中工作，我正在尝试将图像文件发布到服务器。 在我的前端代码中，我已经实现了处理图像上传的必要功能。 handleDragOver 、 handleDragLeave和handleDrop函数允许用户将图像拖放到指定区域。 create function 然后处理表单提交，创建 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 function 来处理请求。 在这个 function 中，我尝试使用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 服务器和 inte.net 上找到解决方案，但我找不到满意的答案。

我期待找到一个解决方案，使我能够使用 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 网站下载它。

Answer 2

这真的很有帮助，也挽救了我的一天。 不幸的是，我还不能升级到节点 20。 将不得不回退到使用pages/api/ 。 看起来你可以同时使用这两种结构，NextJS 仍然会正确地管理路由。