同时发送图像和 JSON

Question

我想同时将 JSON 对象和图像从 react 传递给我的 django rest api。

我已经尝试了这个论坛和教程中的一些解决方案，但在我的情况下没有任何效果。以前我一直在状态字段上使用 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 (Bad Request) 错误。

--编辑--

我更改了代码并创建了用于上传图像的新端点，从技术上讲它可以工作，但我正在尝试将图像和创建的配方 ID 附加到 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

Answer 1

您应该将 DRF MultiPartParser 添加到您的视图的 parser_classes