Next.js 13 向 Strapi v4 集合类型媒体字段批量上传文件的实现问题

看起来你在 Strapi v4 里给 inscricao 集合类型的 fileLink 重复组件批量上传文件时，遇到了媒体字段关联不上的问题——fileLink 里的 ficheiro.data 总是返回 null，虽然 titulo 和 publico 能正常设置对吧？我来帮你理清楚问题出在哪，以及怎么解决。

问题根源 #

你上传文件到 Strapi 的逻辑是对的，但在构造 fileLink 数组时，手动拼接 ficheiro.data.attributes 的方式不符合 Strapi 关联媒体字段的规则。Strapi 的媒体字段（比如你这里的 ficheiro）只需要直接关联媒体库中文件的 ID，不需要手动构造完整的 data 和 attributes 结构——这种手动构造的对象 Strapi 无法识别，所以 ficheiro.data 才会返回 null。

解决方案步骤 #

1. 确认文件上传返回的媒体 ID

你调用 /api/upload 上传文件后，返回的 uploadData 里每个文件条目都包含一个 id，这个就是 Strapi 媒体库中该文件的唯一 ID，我们需要用这个 ID 来关联到 ficheiro 字段。

2. 修改 fileLink 数组的构造逻辑

把原来手动构造 ficheiro.data 的代码，改成直接用上传返回的媒体 ID 赋值给 ficheiro 字段：

const existingFiles = inscricaoData.data.attributes.fileLink || [];

// 重点：用上传后的媒体ID直接关联ficheiro字段
const fileIds = [
  ...existingFiles, // 保留已有的文件条目
  ...uploadData.map((file) => ({
    titulo: file.name,
    publico: true,
    ficheiro: file.id, // 直接使用媒体库文件的ID
  })),
];

3. 完整的更新流程（上传+关联）

如果需要把新的 fileLink 数组更新到对应的 inscricao 条目，还要发起 PUT 请求到 Strapi 的集合类型 API：

// 1. 上传文件到Strapi
const formData = new FormData();
Array.from(files).forEach((file) => {
  formData.append("files", file);
});

const uploadRes = await fetch("http://localhost:1337/api/upload", {
  method: "POST",
  body: formData,
});
const uploadData = await uploadRes.json();

// 2. 构造更新后的fileLink数组
const existingFiles = inscricaoData.data.attributes.fileLink || [];
const updatedFileLink = [
  ...existingFiles,
  ...uploadData.map((file) => ({
    titulo: file.name,
    publico: true,
    ficheiro: file.id,
  })),
];

// 3. 更新对应的inscricao条目
const updateRes = await fetch(`http://localhost:1337/api/inscricoes/${inscricaoId}`, {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
    // 如果启用了API令牌验证，这里需要加Authorization头："Authorization": `Bearer ${yourToken}`
  },
  body: JSON.stringify({
    data: {
      fileLink: updatedFileLink,
    },
  }),
});

const updateResult = await updateRes.json();
console.log("更新成功：", updateResult);

额外注意事项 #

• 检查 Strapi 后台的字段配置：确保 inscricao 集合类型的 fileLink 是重复组件，且组件内的 ficheiro 字段是媒体字段（单文件）——如果是多文件媒体字段，ficheiro 需要赋值为 ID 数组，比如 ficheiro: [file.id]。
• 关于上传时的 ref/refId/field 参数：你原来的代码里加了这三个参数，Strapi 会自动把文件关联到对应字段，但不会帮你设置 titulo 和 publico，所以你手动构造数组并更新的逻辑是对的。
• CORS 问题：如果 Next.js 和 Strapi 跨域，需要在 Strapi 的 config/middlewares.js 里配置允许 Next.js 域名的 CORS 请求。

这样修改后，ficheiro.data 就会正确关联到媒体文件，不会再返回 null 了。

备注：内容来源于stack exchange，提问作者Coyas