如何使用嵌套对象和文件从 Reactjs 前端向 django rest 框架 API 发送发布请求

Question

我尝试使用对象和文件提交数据。 我测试了我的 API，我的 api 正常工作。但是当我从前端发送数据时看到错误。 错误是 400 错误请求。 人是不存在的。

This is the format of my api.

# this is my model

class People(models.Model):
    name = models.CharField(max_length=255)
    image = models.FileField(upload_to='people/', null=True, blank=True)

    def __str__(self):
        return self.name


class Category(models.Model):
    people = models.ForeignKey(People, on_delete=models.CASCADE)
    category_name = models.CharField(max_length=255)
    category_image = models.FileField(upload_to='category_image', null=True, blank=True)

    def __str__(self):
        return self.category_name

# this is my serializer
class PeopleSerializer(serializers.ModelSerializer):

    class Meta:
        model = models.People
        fields = ('id', 'name', 'image')


class CategorySerializer(serializers.ModelSerializer):
    people = PeopleSerializer()

    class Meta:
        model = models.Category
        fields = ('id', 'people', 'category_name', 'category_image')

    def create(self, validated_data):
        people_data = validated_data.pop('people')
        people = models.People.objects.create(**people_data)
        category = models.Category.objects.create(people=people, **validated_data)
        return category

# This is the view
class PeopleViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.PeopleSerializer
    queryset = models.People.objects.all()


class CategoryViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.CategorySerializer
    queryset = models.Category.objects.all()

import React, {Component} from 'react';
import axios from "axios";

class AddPeople extends Component {
    state = {
        name: '',
        image: null,
        category_name: '',
        category_image: null,
    };

    handleChange = (e) => {
        this.setState({
            [e.target.id]: e.target.value
        })
    };

    handleImageChange = (e) => {
        this.setState({
            image: e.target.files[0],
            category_image: e.target.files[0]
        })
    };

    handleSubmit = (e) => {
        e.preventDefault();
        console.log('this state', this.state);
        let form_data = new FormData();

        // form_data.append('image', this.state.image, this.state.image.name);
        form_data.append('category_image', this.state.category_image, this.state.category_image.name);
        form_data.append('category_name', this.state.category_name);

        form_data.append('people', JSON.stringify(people));

        let url = 'http://127.0.0.1:8000/api/v1/category/';


        // console.log(token);
        axios.post(url, form_data, {
            headers: {
                Accept: 'application/json',
                'content-type': 'multipart/form-data',
            }
        })
            .then(res => {
                console.log('success', res.data);
            })
            .catch(err => console.log(err))
    };

    render() {
        return (
            <div className="App">
                <form onSubmit={this.handleSubmit}>
                    <p>
                        <input type="text" placeholder='Name' id='name' value={this.state.name}
                               onChange={this.handleChange} required/>
                    </p>

                    <p>
                        <input type="text" placeholder='Category name' id='category_name'
                               value={this.state.category_name}
                               onChange={this.handleChange} required/>
                    </p>

                    <p>
                        <input type="file"
                               id="image"
                               accept="image/png, image/jpeg" onChange={this.handleImageChange}/>
                    </p>

                    <p>
                        <input type="file"
                               id="category_image"
                               accept="image/png, image/jpeg" onChange={this.handleImageChange}/>
                    </p>
                    <input type="submit"/>
                </form>
            </div>
        );
    }
}

export default AddPeople;

Answer 1

问题出在这一行：-

form_data.append("people", JSON.stringify(people));

I added screenshot of output of your react code。 'people' is not defined 是错误。它是未定义的。