使用 Next Js 应用程序路由器、react hook 表单、react dropzone 和路由处理程序实现多个数据（文本和图像上传）

Question

在我的 Next 13 Web 应用程序中，我希望经过身份验证的用户能够上传产品数据，其中包括一组字符串、数字、单个特色图像和一系列产品图像。该表单是一个使用

use client

方向的客户端组件。 由于我可以在服务器组件中使用表单提交，因此我必须通过来自 客户端组件 -> 路由处理程序的表单数据（这样我可以在请求中使用 cookie） -> Strapi 上传 api 和产品 api 来完成此操作。

我已经能够成功从react dropzone获取图像并将它们设置为uploadedImage状态。
我已经能够将图像添加到提交处理程序中的反应挂钩表单数据中，如下所示：

    const fd = new FormData();

    const { featuredImage, images, ...rest } = formData;

    Object.entries(rest).forEach(([key, value]) => {
      fd.append(key, value);
    });

    if (featuredImage) {
      const featuredImageData = images[featuredImage];
      fd.append("featuredImage", featuredImageData);
    }

    images.forEach((image) => {
      fd.append("images", image);
    });

    const response = await fetch("/api/createProduct", {
      method: "POST",
      body: fd,
    });

    const data = await response.json();
  };

现在，在

/api/createProduct/route.js

 文件中的路由处理程序中，我尝试获取这样的 formData：

export async function POST(request) {
const formData = await request.formData()

console.log('ROUTE formData', formData);

return Response.json({ status: 'done' })
  }

当我console.log formData时，我得到的是：

ROUTE formData FormData {
  [Symbol(state)]: [
    { name: 'title', value: 'Bakabaka' },
    { name: 'price', value: '124' },
    { name: 'category', value: '1876' },
    { name: 'brand', value: '227' },
    { name: 'images', value: [File] },
    { name: 'images', value: [File] },
    { name: 'images', value: [File] },
    { name: 'images', value: [File] }
  ]

我不知道如何以 Strapi 理解的形式获取数据。我在网上到处搜索但所有的解决方案都不起作用。有谁有任何资源可以让我清楚地了解一步一步的方法吗？

Answer 1

从 FormData 获取单个值

const title = formData.get("title") 要一次获取多个值，例如。从 FormData 获取多个文件

const images = forumData.getAll("images")