React中使用Axios调用Strapi POST接口出现400错误求助

错误信息1 relation(s) of type plugin::upload.file associated with this entity do not exist直接点明了问题核心：你在Strapi后台定义的Product模型的image字段是媒体关联字段（关联Strapi Upload插件的File实体），而非普通文本字段。这类字段要求传入Strapi系统内已存在的File实体ID，你直接传入外部URL时，Strapi找不到对应File记录，因此触发验证错误。

根据你的业务需求，可选择以下两种方案：

方案1：通过Strapi Upload API上传图片后关联 #

如果需要将图片托管在Strapi服务器，按以下步骤操作：

1. 先调用Strapi的上传接口提交图片文件，获取返回的文件ID
2. 创建Product时，将image字段设置为该文件ID

React代码修改示例：

const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [imageFile, setImageFile] = useState(null); // 存储File对象而非URL
const [price, setPrice] = useState("");
const [brand, setBrand] = useState("");

const handleSubmit = async (e) => {
  e.preventDefault();

  try {
    // 1. 上传图片到Strapi
    const formData = new FormData();
    formData.append('files', imageFile);
    const uploadRes = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/upload`, formData);
    const fileId = uploadRes.data[0].id;

    // 2. 创建Product并关联文件ID
    const productRes = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/products`, {
      data: {
        name,
        description,
        image: fileId,
        price,
        brand
      }
    });
    console.log(productRes);
  } catch (error) {
    setError(error);
    console.log(error);
  }
};

对应表单文件输入需修改为：

<input 
  type="file" 
  onChange={(e) => setImageFile(e.target.files[0])}
/>

方案2：修改Strapi字段类型为文本，直接存储URL #

如果仅需存储外部图片URL，无需Strapi托管图片，修改Strapi后台字段配置：

• 进入Strapi后台，打开Product模型的编辑界面
• 删除现有的image媒体关联字段
• 添加一个文本字段（或URL字段），命名为image
• 保存模型并重启Strapi服务

修改完成后，你原有传入URL的代码即可正常运行，不会再触发验证错误。

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