next.js 使用formdata发布图像时出错:“NotSupportedError:multipart/form-data not supported”

qeeaahzv  于 2023-05-06  发布在  其他
关注(0)|答案(1)|浏览(174)

我正在使用Next.js版本13.4.1,并尝试使用multipart/form-data将文件发布到服务器。但是,当尝试这样做时,我收到一条错误消息,指出不支持该格式。我看到一些博客和其他开发人员成功地使用了这种方法,所以我相信这可能是我的代码或Next.js本身的一个bug。
我正在我的项目的app目录中工作,我试图将图像文件发布到服务器。在我的前端代码中,我已经实现了处理图像上传的必要函数。handleDragOverhandleDragLeavehandleDrop功能允许用户将图像拖放到指定区域。然后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中的一个bug,或者是我的特定设置的兼容性问题。
我已经尝试了几种解决方案来解决我所面临的使用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'
}
v1uwarro

v1uwarro1#

经过一些研究,我发现问题出在我使用的NodeJS版本上。我运行的是18.10版本,但当我升级到20.1.0版本(这是撰写本文时的当前版本)时,formData开始工作。
因此,这个问题似乎与NodeJS版本有关。我会建议尝试升级到最新版本,看看这是否能为未来的人们解决问题。你可以从NodeJS官方网站download它。

相关问题