如何用Fetch API将Next.js图片上传至Strapi并关联Banner字段

在Strapi中已配置用户集合类型（包含Banner字段），需要在Next.js中通过Strapi的/api/upload接口为用户设置Banner字段。目前图片能成功上传到Strapi媒体库，但无法关联到用户的Banner字段，相关实现代码如下：

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);
    
  }

核心问题是请求体处理错误：你没有直接传递构建好的FormData，反而把文件转成JSON字符串发送，导致Strapi无法正确解析文件和关联参数，只能完成上传但没法把图片和用户的Banner字段绑定。另外部分参数的写法也不符合Strapi接口要求。

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

    const formData = new FormData();
    // 添加上传的图片文件
    formData.append("files", file[0]);
    // 指定要关联的字段名称
    formData.append("field", "banner");
    // 指定目标用户的ID（替换成实际用户ID）
    formData.append("refId", data?.id);
    // 指定关联的集合类型（用户权限插件的用户集合）
    formData.append("ref", "plugin::users-permissions.user");

    try {
        const res = await fetch("http://localhost:1337/api/upload", {
            method: "POST",
            headers: {
                Authorization: apiKey, // 确保是有效的Strapi授权令牌
            },
            body: formData, // 直接传递FormData，浏览器会自动处理请求头
        });

        const dataRes = await res.json();
        console.log(dataRes);
    } catch (error) {
        console.error("Banner上传失败:", error);
    }
}

• 确保apiKey拥有媒体库上传权限和用户集合的修改权限，否则会出现权限不足的错误。
• refId要传递有效的用户ID，不能是空值或无效ID，否则无法完成关联。
• Strapi接口对参数大小写敏感，refid需要写成驼峰式的refId，部分版本会因为参数名错误导致关联失败。

内容的提问来源于stack exchange，提问作者Vraj