Как загрузить изображение/медиафайл из React в Django API?

Я могу сохранить данные без поля изображения. Я новичок, поэтому не очень хорошо разбираюсь в подобных проблемах. В чем проблема с полем изображения? Это не показывает мне никакой ошибки, просто мои данные изображения не сохраняются. Я делюсь всем своим кодом, это будет действительно полезно, если вы, ребята, поможете мне.

#models.py

class Test(models.Model):
    full_name = models.TextField(max_length=200, blank=True, null=True)
    image =  models.ImageField(null=True, blank=True)
    address = models.TextField(max_length=200, blank=True, null=True)

    def __str__(self):
        return str(self.id)

#views.py

@api_view(['POST'])
def add(request):
    data = request.data
    test = Test.objects.create(
            full_name = data['full_name'],
            address = data['address'],
        )
    serializer = TestSerializer(test, many=False)
    return Response(serializer.data)

#это экран для страницы реакции

import React from 'react';
class Test extends React.Component{
    constructor(){
        super();
        this.state={
            full_name:'',
            image: '',
            address:''
            
        }
        this.changeHandler=this.changeHandler.bind(this);
        this.submitForm=this.submitForm.bind(this);
    }

    // Input Change Handler
    changeHandler(event){
        this.setState({
            [event.target.name]:event.target.value
        });
    }

    // Submit Form
    submitForm(){
        fetch('http://127.0.0.1:8000/api/orders/test',{
            method:'POST',
            body:JSON.stringify(this.state),
            headers:{
                'Content-type': 'application/json; charset=UTF-8',
            },
        })
        .then(response=>response.json())
        .then((data)=>console.log(data));

        this.setState({
            full_name:'',
            image: '',
            address:''
            
        });
    }

    render(){
        return (
            <table className="table table-bordered">
                <tbody>
                    <tr>
                        <th>Full Name</th>
                        <td>
                            <input value={this.state.full_name} name="full_name" onChange={this.changeHandler} type="text" className="form-control" />
                        </td>
                    </tr>

                    <tr>
                        <th>Voucher</th>
                        <td>
                            <input value={this.state.image} name="image" onChange={this.changeHandler} type="file" className="form-control" />
                        </td>
                    </tr>
                    
                    <tr>
                        <th>Address</th>
                        <td>
                            <input value={this.state.address} name="address" onChange={this.changeHandler} type="text" className="form-control" />
                        </td>
                    </tr>
                    <tr>
                        <td colSpan="2">
                            <input type="submit" onClick={this.submitForm} className="btn btn-dark" />
                        </td>
                    </tr>
                </tbody>
            </table>
        );
    }
}

export default Test;

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