如何将图像上传链接到strapi条目创建答案

【问题标题】：How to link image upload to strapi entry creation如何将图像上传链接到strapi条目创建
【发布时间】：2021-09-14 20:38:46
【问题描述】：

我正在对我的strapi 进行发布请求，并且它在某种程度上可以工作，但我无法将我的文件（图像）链接到相同的条目创建。当我提交表单时，我只会让formDataToSend 显示在strapi 中。

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>



)

当我记录他们两个的响应时，它显示文件已上传，但未链接到此条目，我也可以在 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"
}

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

【问题讨论】：

标签： reactjs axios multipartform-data form-data strapi

【解决方案1】：

好吧，要将上传的文件链接到特定条目，以下参数是强制性的：

请求参数：

文件 - 要上传的文件。值可以是 Buffer 或 Stream。
refId - 文件将链接到的条目的 ID。
ref - 文件将链接到的模型的名称（见下文）。
field - 文件将精确链接到的条目字段。

解决您的问题：

根据您在上面发布的问题，很明显您在请求参数中缺少 field 键。此键应包含将链接上传的文件数据的集合的列/字段名称。

实施：

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 的集合，然后更新restaraunt 集合的restaraunt_logo 列/字段中的数据。

参考：

Upload files related to an entry

【讨论】：