Я хочу передать объект JSON и изображение одновременно с реакцией на мой API django rest.
Я пробовал некоторые решения из этого форума и учебных пособий, но в моем случае ничего не помогало. Ранее я использовал JSON.stringify для полей состояния, и это сработало, но я не смог передать изображение, и теперь я остановился на чем-то подобном.
postData.js
let formData = new FormData();
const { title, description, image, ingredient, step } = this.state;
formData.append('image', image);
formData.append('title', title);
formData.append('description', description);
formData.append('ingredient', ingredient);
formData.append('step', step);
let conf = {
method: 'post',
body: formData,
headers: new Headers({
'Content-Type': 'multipart/form-data',
'Accept': 'application/json'
})
};
fetch('http://127.0.0.1:8000/api/', conf)
.then(res => {
this.props.history.push('/');
})
.catch(err=>{console.log(err)})
serializers.py
class RecipeSerializer(serializers.ModelSerializer):
ingredient = IngredientSerializer(many=True, required=False)
step = StepSerializer(many=True, required=False)
class Meta:
model=models.Recipe
fields=('id', 'title', 'description', 'image', 'ingredient', 'step', )
def create(self, validated_data):
ingredient_data = validated_data.pop('ingredient')
step_data = validated_data.pop('step')
recipe = models.Recipe.objects.create(**validated_data)
for ingredient in ingredient_data:
models.Ingredient.objects.create(recipe=recipe, **ingredient)
for step in step_data:
models.Step.objects.create(recipe=recipe, **step)
return recipe
views.py
class ListRecipes(generics.ListCreateAPIView):
queryset = Recipe.objects.all()
serializer_class = RecipeSerializer
class DetailRecipe(generics.RetrieveUpdateDestroyAPIView):
queryset = Recipe.objects.all()
serializer_class = RecipeSerializer
Я всегда получаю POST http://127.0.0.1:8000/api/ 400 (неверный запрос) Ошибка.
- EDIT -
Я изменил код и создал новую конечную точку для загрузки изображений, и технически это работает, но я пытаюсь добавить изображение и создал идентификатор рецепта в FormData (), и когда я регистрирую его в консоли, он содержит их оба, но когда я печатаю на бэкэнд он содержит только изображение.
postData.js
formData.append('id', this.state.id);
formData.append('image', image, image.name);
for(let key of formData.entries()){
console.log(key);
}
let data = {
method: 'post',
body: formData,
headers: new Headers({
'Accept': 'application/json'
})
};
fetch('http://127.0.0.1:8000/api/images/', data)
.then(res => {
console.log(res);
})
.catch(err=>{
console.log(err);
})
serializers.py
class ImageSerializer(serializers.ModelSerializer):
class Meta:
model = models.Image
fields = ('id', 'image', )
def create(self, validated_data):
print(validated_data)
recipe = models.Recipe.objects.get(id=validated_data.id)
image = models.Image.objects.create(recipe=recipe, **validated_data)
return image