reactjs - 如何将图像上传链接到strapi条目创建

Question

我正在对我的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"
}

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

标签： reactjsaxiosmultipartform-dataform-datastrapi

Answer 1

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

请求参数：

• files - 要上传的文件。值可以是 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_logo列/字段中的数据restaraunt。

参考：

• 上传与条目相关的文件