javascript 如何使用Fetch API将图像从Next.js发送到Strapi？

jq6vz3qz 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(122)

我在Strapi有这个系列类型：

我需要在Next.js中设置Strapi端点的横幅。
我尝试使用此API http://localhost:1337/api/upload。图像上传成功，但图像没有设置在我的用户横幅字段。图像只去Strapi媒体库。

async function handalBannerUpload(e){
    e.preventDefault();

    const formdata = new FormData();

    formdata.append("files",file[0]);
    formdata.append("field","banner");
    formdata.append("refid",29);
    formdata.append("ref","plugin::users-permissions.user");

    // for (const value of formdata.values()) {
    //   console.log({value});
    // }

    const res = await fetch("http://localhost:1337/api/upload",{
      method:"POST",
      headers: {
        // 'Content-Type': 'multipart/form-data',
        Authorization: apiKey,
      },
      body: {
        files: JSON.stringify(formdata.get('files')),
        field: "banner",
        refid: data?.id,
        ref: "plugin::users-permissions.user",
      }
      // body: formdata
    })

    const dataRes = await res.json();

    console.log(dataRes);
    
  }

JavaScript

来源：https://stackoverflow.com/questions/75308485/how-to-send-an-image-from-next-js-to-strapi-using-fetch-api

1条答案

按热度按时间

gdrx4gfi1#

我猜你快到了Vraj.
我发现的唯一问题是传递给fetch API的options对象的"body"属性。
您不应传递包含作为键值对的参数的对象，而应直接将FormData对象作为请求主体传递。
下面是代码：

async function handalBannerUpload(e) {
  e.preventDefault();

  const formData = new FormData();

  formData.append("files", file[0]);
  formData.append("field", "banner");
  formData.append("refId", 29);
  formData.append("ref", "plugin::users-permissions.user");

  const res = await fetch("http://localhost:1337/api/upload", {
   method: "POST",
   headers: {
    Authorization: apiKey
   },
   body: formData
  });

   const dataRes = await res.json();

   console.log(dataRes);

}

如果你觉得这个答案有用，请考虑通过点击赞成票符号投你的支持票。
谢谢大家!

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 如何使用Fetch API将图像从Next.js发送到Strapi？

1条答案

相关问题

热门标签

最新问答