Strapi v4如何通过RestAPI上传图片至组件内的Media字段

一、使用默认REST API上传（无需自定义代码） #

Strapi v4的默认REST API支持通过multipart/form-data直接上传嵌套组件内的媒体文件，核心是正确命名formData中的文件字段，使其匹配组件的嵌套路径。

假设你的数据结构如下：

• 集合：properties
• 重复组件字段：rooms（对应多个房间条目）
• 组件room内的Media字段：room_images（支持单张/多张图片）

1. 单张图片上传的formData结构 #

• 字段data：JSON格式字符串，定义基础数据和组件结构（媒体字段暂时设为null）

  {
    "name": "海景公寓",
    "rooms": [
      {
        "room_name": "主卧",
        "room_images": null
      }
    ]
  }
  

• 文件字段：命名为rooms[0][room_images]，值为要上传的图片文件

2. 多张图片上传的formData结构 #

• 字段data：组件内的媒体字段设为空数组

  {
    "name": "海景公寓",
    "rooms": [
      {
        "room_name": "主卧",
        "room_images": []
      }
    ]
  }
  

• 文件字段：命名为rooms[0][room_images][]，可添加多个图片文件

3. 深层嵌套组件的字段命名规则 #

如果嵌套层级更深（比如room组件里还有amenities子组件，子组件内有media字段），文件字段名需完整匹配路径：

rooms[0][amenities][0][media]

请求说明 #

• 请求方法：POST（创建）或PUT（更新）
• 请求路径：/api/properties（创建）或/api/properties/{id}（更新）
• 请求头：Content-Type: multipart/form-data

二、自定义控制器扩展（针对复杂嵌套/特殊业务） #

如果默认API无法满足深层嵌套或自定义逻辑需求，可以通过扩展控制器手动处理文件上传与关联：

1. 在src/api/property/controllers/property.js中编写自定义控制器：

const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController('api::property.property', ({ strapi }) => ({
  async create(ctx) {
    // 解析formData中的数据和文件
    const { data, files } = ctx.request.body;
    const parsedData = JSON.parse(data);

    // 遍历rooms组件，处理每个房间的图片上传
    if (parsedData.rooms && files) {
      for (let idx = 0; idx < parsedData.rooms.length; idx++) {
        const room = parsedData.rooms[idx];
        const fileKey = `rooms[${idx}][room_images]`;
        
        if (files[fileKey]) {
          // 将文件上传至Strapi媒体库
          const uploadedFiles = await strapi.plugins.upload.services.upload.upload({
            data: {},
            files: files[fileKey]
          });
          // 将上传后的文件ID绑定到组件的媒体字段
          room.room_images = uploadedFiles.map(file => file.id);
        }
      }
    }

    // 更新请求体中的data为处理后的JSON字符串
    ctx.request.body.data = JSON.stringify(parsedData);
    // 调用默认创建方法完成数据存储
    return await super.create(ctx);
  },

  // 如需支持更新，可同理扩展update方法
  async update(ctx) {
    // 逻辑与create类似，需先获取原有数据，再替换或新增媒体字段
    const { data, files } = ctx.request.body;
    const parsedData = JSON.parse(data);

    if (parsedData.rooms && files) {
      for (let idx = 0; idx < parsedData.rooms.length; idx++) {
        const room = parsedData.rooms[idx];
        const fileKey = `rooms[${idx}][room_images]`;
        
        if (files[fileKey]) {
          const uploadedFiles = await strapi.plugins.upload.services.upload.upload({
            data: {},
            files: files[fileKey]
          });
          room.room_images = uploadedFiles.map(file => file.id);
        }
      }
    }

    ctx.request.body.data = JSON.stringify(parsedData);
    return await super.update(ctx);
  }
}));

2. 重启Strapi服务后，即可使用自定义的API接口完成上传。

注意事项 #

• 确保properties集合、room组件的权限配置中，已开启对应API的创建/更新权限，以及媒体库的上传权限
• 媒体字段在Strapi后台需配置为允许上传（单张/多张对应不同字段类型）

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