如何在上传至Strapi媒体库时指定图片排序规则？

我有一个带拖拽文件输入框的汽车发布表单，功能正常，但图片上传到Strapi后顺序会改变，观察发现是按文件大小从大到小排序的。我希望能按文件名等规则保持上传时的顺序，该怎么实现？

状态中的图片与Strapi中的图片顺序对比：

我用acceptedFiles状态存储上传的文件：

const [acceptedFiles, setAcceptedFiles] = useState<FileWithPreview[]>([]);

表单提交时，创建汽车条目并添加图片的代码：

...
const uploadFormData = new FormData();

uploadFormData.append("ref", "api::car.car");
uploadFormData.append("refId", `${res.data.data.id}`);
uploadFormData.append("field", "images");
uploadFormData.append(
  "path",
  `cars/${user ? `private/${user.username}` : "public"}/${
    res.data.data.id
  }`,
);
await fetcher.post(`/upload`, uploadFormData)

解决方法 #

Strapi默认会对批量上传的文件按大小排序，要保持自定义顺序，可通过以下两种方案实现：

方案1：按顺序逐个上传文件

循环遍历acceptedFiles，每次上传单个文件，Strapi会严格按照上传顺序保留排序：

// 创建汽车条目后，逐个上传图片
for (const file of acceptedFiles) {
  const uploadFormData = new FormData();
  uploadFormData.append("ref", "api::car.car");
  uploadFormData.append("refId", `${res.data.data.id}`);
  uploadFormData.append("field", "images");
  uploadFormData.append(
    "path",
    `cars/${user ? `private/${user.username}` : "public"}/${res.data.data.id}`,
  );
  uploadFormData.append("files", file);
  await fetcher.post(`/upload`, uploadFormData);
}

特点：逻辑简单，完全保证顺序；但会发起多请求，适合文件数量不多的场景。

方案2：批量上传时手动指定排序字段

Strapi支持通过order参数控制文件排序，在FormData中按顺序添加文件的同时，附加对应的索引值：

const uploadFormData = new FormData();

uploadFormData.append("ref", "api::car.car");
uploadFormData.append("refId", `${res.data.data.id}`);
uploadFormData.append("field", "images");
uploadFormData.append(
  "path",
  `cars/${user ? `private/${user.username}` : "public"}/${res.data.data.id}`,
);

// 按acceptedFiles的顺序，给每个文件绑定排序索引
acceptedFiles.forEach((file, index) => {
  uploadFormData.append("files", file);
  uploadFormData.append("files.order", index);
});

await fetcher.post(`/upload`, uploadFormData);

特点：一次请求完成上传；需确保order参数与文件顺序严格对应，部分Strapi版本需确保模型字段支持排序。

额外配置 #

确保Strapi汽车模型的images字段启用有序媒体配置：

// api/car/models/car.js
module.exports = {
  attributes: {
    images: {
      type: 'media',
      multiple: true,
      required: false
    },
  },
};

内容的提问来源于stack exchange，提问作者Артем Захаров