Strapi v4:如何将上传的文件链接到Collection Type中条目的字段

Question

我有一个名为events的集合类型。Events在其数据体系结构中具有名称和图像。因此events有一个名称字段和一个图像字段。

我已经设法通过/api/upload端点上传一个文件到strapi v4。我知道上传正在工作，因为正在上传的文件确实出现在strapi localhost:1337后端管理区域中，并且它也出现在cloudary后端。

但是，图像文件最终不会被添加到事件的图像字段中。

我试着在网上遵循多个示例的代码，但似乎大多数在线示例都是针对v3和v4的strapi。

在任何情况下，下面是我的代码，我在上传文件之前添加了formData的ref, refId和field…但它仍然不工作。

export default function ImageUpload({ evtId, imageUploaded }) {
    const [image, setImage] = useState(null)
    const handleSubmit = async (e) => {
        console.log('handleSubmit')
        e.preventDefault()
        const formData = new FormData() // pure javascript nothing to do with react
        formData.append('files', image)
        formData.append('ref', 'events') //'ref' The collection we want to use
        formData.append('refId', evtId) //'refId' The event Id
        formData.append('field', 'image') //'field' the image field we called 'image'
        const res = await fetch(`${API_URL}/api/upload`, {
            method: 'POST',
            body: formData,
        })
        if (res.ok) {
            console.log('res.ok')
            // imageUploaded()
        }
    }
    const handleFileChange = (e) => {
        console.log('handleFileChange')
        console.log(e.target.files[0]) //this will give us an array and we want the first wone so we add 0
        setImage(e.target.files[0])
    }
    return (
        <div className={styles.form}>
            <h1> Upload Event Image</h1>
            <form onSubmit={handleSubmit}>
                <div className={styles.file}>
                    <input type='file' onChange={handleFileChange} />
                </div>
                <input type='submit' value='Upload' className='btn' />
            </form>
        </div>
    )
}

我做错了什么?我该怎么做才能将新上传的文件添加到事件集合类型的事件条目的图像字段?

Answer 1

更改行:

formData.append('ref', 'events')

formData.append('ref', 'api::event.event')

and it worked…

下面是更新后的代码…希望它能帮助到其他人。

import React from 'react'
import { useState } from 'react'
import { API_URL } from '@/config/index'
import styles from '@/styles/Form.module.css'
export default function ImageUpload({ evtId, imageUploaded }) {
    const [image, setImage] = useState(null)
    const handleSubmit = async (e) => {
        console.log('handleSubmit')
        e.preventDefault()
        const formData = new FormData() // pure javascript nothing to do with react
        formData.append('files', image)
        // formData.append('ref', 'events') //'ref' The collection we want to use
        formData.append('ref', 'api::event.event')
        formData.append('refId', evtId) //'refId' The event Id
        formData.append('field', 'image') //'field' the image field we called 'image'
        const res = await fetch(`${API_URL}/api/upload`, {
            method: 'POST',
            body: formData,
        })
        if (res.ok) {
            console.log('res.ok')
            console.log('res', res)
            // imageUploaded()
        }
    }
    const handleFileChange = (e) => {
        console.log('handleFileChange')
        console.log(e.target.files[0]) //this will give us an array and we want the first wone so we add 0
        setImage(e.target.files[0])
    }
    return (
        <div className={styles.form}>
            <h1> Upload Event Image</h1>
            <form onSubmit={handleSubmit}>
                <div className={styles.file}>
                    <input type='file' onChange={handleFileChange} />
                </div>
                <input type='submit' value='Upload' className='btn' />
            </form>
        </div>
    )
}

Answer 2

我制作了一个视频来解释它

https://www.youtube.com/watch?v=54_SKMmrJkA

基本上你必须以特定的格式上传文件，否则将无法工作

Answer 3

很好的答案，但是不能用它来更新事件集合中的图像字段，即使它成功地上传到媒体