Как разместить изображение и текст в форме React Js?

Здесь у меня есть два компонента дочерний компонент, который передает текст и изображение в родительский компонент и родительский компонент публикует форму Но текст передается, а изображение получает ошибку.

Я использую Django в качестве Backend я могу предоставить его тоже, если требуется. Это просто простой Django-Rest-Framework Без валидации.

Здесь, когда я console.log() p_details.Banner, p_imgs.Image оба предоставляют файл

Хотя я сталкиваюсь с ошибкой.

Баннер : ['Отправленные данные не были файлом. Проверьте тип кодировки в форме.']

product_image : "Image": [ "Файл не был отправлен". ]

const Parent_Comp = ({p_details, p_imgs}) =>{

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

        const products = new FormData();
        Object.keys(p_details).forEach((key) => products.append(key, p_details[key]));
        var parentObj = [];

        for (var key in p_imgs.Image) {
            if (p_imgs.Image.hasOwnProperty(key)) {
                var file = p_imgs.Image[key];
                var nameWithKey = p_imgs.Name + "[" + key + "]";
                var obj = {
                    "Name": nameWithKey,
                    "image": file
                };
                parentObj.push(obj);
            }
        }
        products.append('product_image', JSON.stringify(parentObj));
        
        const productsObj = {};

        for (const [key, value] of products.entries()) {
            if (key === 'product_image') {
                productsObj[key] = JSON.parse(value);
            } else {
                productsObj[key] = value;
            }
        }

        console.log(productsObj);


        try {
            const res = await axios.post('http://127.0.0.1:8000/media/product/create/', productsObj, {
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json', // Assuming you're sending JSON data
                     // Add any other headers if needed
                 }
            });
            console.log("Product Created Successfully");
        } catch (error) {
            console.log(error);
            console.log(error.response.data); // Accessing response data
        }
        
        
    };

    return(
    <>
            <form onSubmit={handleSubmit} encType="multipart/form-data">
                <Button type="submit">Submit</Button>
            </form>

    </>
    )
}

И на productsObj и на formData (products) я получаю одну и ту же ошибку.

Вернуться на верх