Ошибка публикации изображения с использованием 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, но проблема не исчезла. Я даже пытался найти решение на официальном сервере Discord для Next.js и в Интернете, но не смог найти удовлетворительного ответа.

Я ожидал найти решение, которое позволило бы мне успешно отправить файл на сервер, используя 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 по-прежнему будет правильно управлять маршрутизацией.