如何使用 Django Rest Framework 发布包含文件的嵌套数据?

dan*_*boy 7 django django-rest-framework reactjs

几天来我一直在尝试通过 django drf 发布一个包含一个文件和一些数据的嵌套对象。目标是与一些图像一起创建一个故事,其中一张图像是故事的标题图像。基本上,我能够用邮递员成功发布故事(见下图)。但是,当我使用 React js 前端进行发送时,我无法以 Django 理解的方式创建表单数据。Django 总是返回错误story_media field is required。我想这是因为 Django 无法正确理解传入的数据。

class Story (models.Model):
    title = models.CharField(max_length=100,blank=True)
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True)

class Story_Media (models.Model):
    story = models.ForeignKey(Story,on_delete=models.CASCADE, null=True, related_name = 'story_media', related_query_name = 'story_media')
    file = models.FileField(upload_to='story_media/', null=True)
    isTitlePicture = models.BooleanField(blank=False, null=True) 
Run Code Online (Sandbox Code Playgroud)
# Story  Story Media Serializer
class Story_Media_Serializer (serializers.ModelSerializer):

    class Meta:
        model = Story_Media
        fields =  ('id','file','isTitlePicture',)


# Story  Serializer
class StoryCreateUpdateSerializer (serializers.ModelSerializer):
    story_media = Story_Media_Serializer(many=True)

    class Meta:
        model = Story
        fields =  ('title','story_media',)

    def create(self, validated_data):
        current_user = self.context["request"].user
        story_media = validated_data.pop('story_media')
        
        story_instance = Story.objects.create(author=current_user, **validated_data)

        for story_media_data in story_media:
            Story_Media.objects.create(**story_media_data, story=story_instance)

# Story  Create View Set
class StoryCreateUpdateViewSet(viewsets.ModelViewSet):
    serializer_class = StoryCreateUpdateSerializer
    queryset = Story.objects.all()
Run Code Online (Sandbox Code Playgroud)

这就是我在 React js 中创建表单数据的方法。在此示例中story_media_array仅包含单个图像对象。

    // array that stores all the images
    let story_media_array = [];
 
    // single image object
    var image_object ={
     file: this.state.file[0], // some file
     isTitlePicture: "True"
    }
    
    // push image object in array
    story_media.push(image_object);

    let formdata = new FormData();
    
    // title
    formdata.append('title', "Test")
    // image
    formData.append('story_media', story_media_array)
Run Code Online (Sandbox Code Playgroud)

但是,正如我上面所写,我无法使用上面的代码创建表单,它返回“story_media 字段是必需的”。但它适用于邮递员。我现在有点迷失,所以我很高兴能得到任何帮助。

在此输入图像描述