django REST framework 嵌套序列化器和 POST 嵌套 JSON 文件

Question

如何将包含文件（图像）在内的嵌套数据的 POST 请求发送到 django REST 嵌套序列化程序？

给定这个 JS 对象：

bookData: {
    title: 'Anne of Green Gables',
    coverImage: File(123456),
    pages: 123,
    author: {
        name: 'Lucy Maud Montgomery',
        born: 1874,
        profilepicture_set: [
            {file: File(234567), description: 'Young L. M. Montgomery'},
            {file: File(234568), description: 'Old L. M. Montgomery}
        ],
        quote_set: [
            {text: "I'm so glad I live in a world where there are Octobers."},
            {text: "True friends are always together in spirit."},
        ]
    },

}

我想向我的 django REST API 发送一个 POST 请求（我在前端使用 VueJS，但这并不重要）。

# views.py
class CreateBookView(generics.CreateAPIView):
    serializer_class = CreateBookSerializer
    queryset = Book.objects.all()

# serializers.py
class CreateBookSerializer(serializers.ModelSerializer):
    author = CreateAuthorSerializer()

    class Meta:
        model = Book
        fields = ('title', 'pages', 'author')

    @transaction.atomic
    def create(self, validated_data):
        author_data = validated_data.pop('author')
        uploader = self.context['request'].user
        book = Book.objects.create(uploader=uploader, **validated_data)

        Author.objects.create(book=book, **author_data)

        return book


# models.py
class AuthorManager(models.Manager):

    def create(self, **author_data):
        quotes_data = author_data.pop('quote_set')
        photos_data = author_data.pop('profilepicture_set')

        author = Author(**author_data)
        author.save()

        for quote_data in quotes_data:
            Quote.objects.create(author=author, **quote_data)

        for photo_data in photos_data :
            ProfilePicture.objects.create(author=author, **photo_data)

        return author

## Skipping the CreateAuthorSerializer, Quote and ProfilePicture Managers as they are analogous.
## Assume one Author can only write one Book (OneToOneField). No need to look the name up for existing Authors.

---

编辑

我想添加一些关于如何在 VueJS 的前端发送数据的信息。

sendData(){
    var fd = new FormData()
    var bookData = {
        title: this.$store.getters.title, # 'Anne of Green Gables"
        coverImage: this.$store.getters.coverImage, # File(somesize)
        pages: this.$store.getters.pages, # 123
        author: this.$store.getters.author, # nested object 
        ...
    }
    fd = objectToFormData(bookData, fd) # external function, see below
    this.$http.post('api/endpoint/create/', fd, headers: {
        'Content-Type': 'multipart/form-data',
        'X-CSRFToken': Cookies.get('csrftoken'),
        }
    }).then(...)
}

sendData() 在按钮单击时被调用。 objectToFormData 是来自 npm (click) 的外部库，可将嵌套对象转换为平面形式。

这个解决方案（以及@Saji Xavier 的解决方案）的问题是request.data 包含一个丑陋的QueryDict，它与原始bookData 对象结构相去甚远，并且不被REST 序列化程序（即author 字段丢失 - 这是真的，对象已被展平）。

<QueryDict: {
'title': ['Anne of Green Gables'], 
'coverImage':[InMemoryUploadedFile: cover.jpg (image/jpeg)],
'pages': ['123'], 
'name': ['Lucy Maud Montgomery'], 
'born': ['1874'],
'profilepicture_set[][description]': ['Young L. M. Montgomery', 'Old L. M. Montgomery'], 
'profilepicture_set[][file]': [
    InMemoryUploadedFile: young.jpg (image/jpeg), 
    InMemoryUploadedFile: old.jpg (image/jpeg)
    ],
'quote_set[][text]': [
    "I'm so glad I live in a world where there are Octobers.",
    "True friends are always together in spirit."
    ]
}>

我现在该如何处理？好像太丑了我能想到的是覆盖create()函数。

class CreateBookView(generics.CreateAPIView):
    (...)
    def create(self, request, *args, **kwargs):
        book_data = {}
        book_data['title'] = request.data['title']
        book_data['pages'] = request.data['pages']
        book_data['cover_image'] = request.data['coverImage']
        book_data['author'] = {}
        book_data['author']['name'] = request.data['name']
        book_data['author']['born'] = request.data['born']
        (...)
        serializer = self.get_serializer(data=book_data)
        (...)

这是一个极其丑陋的解决方案，对于具有多个字段和多个嵌套级别的模型无效（本书/作者只是一个玩具示例）。

我应该如何处理？我是改变 POST 的方式（以获得漂亮的request.data 格式）还是处理这个丑陋的？

Answer 1

根据 DRF documentation，

大多数解析器，例如 e.g. JSON 不支持文件上传。姜戈的 常规 FILE_UPLOAD_HANDLERS 用于处理上传的文件。

一种选择是使用 Javascript FormData API 发送多部分数据（适用于 VueJS/AngularJS）

var fd = new FormData();
fd.append('title', 'Anne of Green Gables')
fd.append('author_name', 'Lucy Maud Montgomery')
fd.append('author_profilepicture_set', files[])
$http.post('url', fd, {
   headers: {
       'Content-Type': 'multipart/form-data'
   }
});