python - 如何使用嵌套对象和文件从 Reactjs 前端向 django rest 框架 API 发送发布请求
问题描述
我尝试使用对象和文件提交数据。我测试了我的 API,我的 api 正常工作。但是当我从前端发送数据时,我看到了错误。错误是 400 错误请求。人是不存在的。
# 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;
解决方案
问题出在这一行:-
form_data.append("people", JSON.stringify(people));
我添加了您的反应代码输出的屏幕截图。'people' is not defined
是错误。它是未定义的。
推荐阅读
- bootstrap-4 - 如何将按钮放在导航栏上,而不是折叠上
- node.js - 如何使用 Prometheus 和 Grafana 监控 Fastify 应用程序?
- python - 如果不是...后跟函数
- r - 如何根据匹配的前缀/后缀合并两个字符串?
- java - onConfigurationChanged 不适用于 API17
- android - Room android LiveData 仅观察调用 2 次
- javascript - 找出对象中的值翻倍需要多少天
- javascript - 从 JSX 内部的渲染访问数组
- python - Python pyserial 一写延迟
- javascript - 无法初始化 git 存储库。`git` 不在 PATH 中。NPM 项目设置问题