如何 link 图片上传到 strapi 条目创建

Question

我正在向我的 strapi 发出 post 请求，它在某种程度上起作用，但我无法 link 我的文件（图像）创建相同的条目。当我提交表单时，我只会在 strapi 中显示 formDataToSend。

const [files,setFiles] = useState()

async function onSubmit(data) {
        setSubmitting(true);
        setError(null);


        let formDataToSend= {
            name: data.name,
            description: data.description,
        }

        axios.post(BASE_URL, formDataToSend)
        .then(res =>{
            console.log(res.data)
            return res.data.id
        })
        .then(refId =>{
            const formData = new FormData();
            formData.append("files", files[0]);
            formData.append("refId", refId);
            formData.append("ref", "example");
            return axios.post(BASE_URL +"upload", formData)
        })
        .then(res =>{
            console.log("success", res.data);
            
        })
        .catch(error =>{
            console.log(error)
        })
}

return(
<Form>
    <Form.Control type="file" {...register("image")}  name="image" onChange= 
    {(e)=>setFiles(e.target.files)} />
</Form>



)

当我记录他们两个的响应时，它显示文件已上传，但它没有link编辑到这个条目，我也可以在 strapi 媒体库中看到它。

{
id: "614104c3c3ded200165081f4"
mime: "image/jpeg"
name: "example_image.jpg"
provider: "cloudinary"
provider_metadata: {public_id: 'example_image', resource_type: 'image'}
related: []
size: 37.52
url: "cloudinaryurlexample.com"
}

{
description: "example description"
id: "614104c0c3ded200165081f3"
name: "example name"
}

非常感谢任何指出我做错了什么以及如何实现这一点的指示！

Answer 1

好吧，link 针对特定条目上传的文件必须遵循以下参数：

请求参数：

• files - 要上传的文件。值可以是缓冲区或流。
• refId - 文件将link编辑到的条目的 ID。
• ref - 文件将 link 编辑到的模型名称（详见下文）。
• 字段 - 文件将精确link编辑到的条目字段。

您的问题的解决方案：

根据您在上面发布的问题，很明显您在请求参数中缺少 field 键。此密钥应包含 collection 的 column/field 名称，上传的文件数据将被 link 编辑。

实施：

const [files,setFiles] = useState()

async function onSubmit(data) {
        setSubmitting(true);
        setError(null);


        let formDataToSend= {
            name: data.name,
            description: data.description,
        }

        axios.post(BASE_URL, formDataToSend)
        .then(res =>{
            console.log(res.data)
            return res.data.id
        })
        .then(refId =>{
            const formData = new FormData();
            formData.append("files", files[0]);
            formData.append("refId", 1);
            formData.append("ref", "restaraunt");
            formData.append("field", "restaraunt_logo");
            return axios.post(BASE_URL +"upload", formData)
        })
        .then(res =>{
            console.log("success", res.data);
            
        })
        .catch(error =>{
            console.log(error)
        })
}

return(
<Form>
    <Form.Control type="file" {...register("image")}  name="image" onChange= 
    {(e)=>setFiles(e.target.files)} />
</Form>

)

据此，它会先将文件上传到媒体库，然后查找名为 restaraunt 的 collection，然后更新 restaraunt_logo [=52= 中的数据] restaraunt collection.

参考：

• Upload files related to an entry