django - 在单页应用程序中使用 django rest 框架上传图像文件

Question

我正在尝试使用 Vuejs 和 Django 上传图像，但我不知道如何解决它。

这是 django 方面:

class UserDetail(models.Model):
    user = models.OneToOneField(User)
    profile_picture = models.ImageField(upload_to=create_file_path)

class UserDetailSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserDetail
        fields = '__all__'

class UserDetailViewSet(viewsets.ModelViewSet):
    queryset = UserDetail.objects.all()
    serializer_class = UserDetailSerializer
    permission_classes = [AllowAny]

    @detail_route(permission_classes=[AllowAny], methods=['POST'], parser_classes=[FormParser, MultiPartParser])
    def create_or_update_profile_picture(self, request):
        user = request.user
        #
        # how to create or update user detail profile picture ?
        #

我从 Vuejs 以这种方式发布数据:

changeProfilePicture() {
    const file_input = document.getElementById('display_profile_image');
    const img = file_input.files[0];
    let formData = new FormData();
    formData.append("profile_picture", img);
    const url = this.$store.state.website + '/api/accounts/user-detail/none/create_or_update_profile_picture/';
    this.$http.post(url, formData)
        .then(function (response) {
            this.$store.dispatch('getUserDetail');
        })
        .catch(function (response) {
            console.log(response);
        });
}

如何使用发布数据创建或更新 request.user的 profile_picture 与模型 View 集类中的 Django 和 django rest 框架，使用默认方法 (create/update/partial_update) 或通过创建新的 detail route ?

Answer 1

假设您的 JS 使用“multipart/form-data”发布请求' (检查 this )，您应该能够在创建或更新用户时上传图像文件。另外，请务必发送 CSRF Token .

为了能够自行设置 Logo ，detailed_route是使用仅限于 Logo 的序列化程序的好方法。
在详细路由中，如果你想上传登录用户的日志(我看到你把none作为id)，你可以在调用get_object之前在详细路由中检查。这将获得 userdetail 实例。

class UserLogoSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserDetail
        fields = ['profile_picture']


class UserDetailViewSet(viewsets.ModelViewSet):
    queryset = UserDetail.objects.all()
    serializer_class = UserDetailSerializer
    permission_classes = [AllowAny]

    @detail_route(methods=['post'])
    def set_profile_picture(self, request, pk=None, format=None):
        if pk in ['none', 'self']: # shortcut to update logged in user without looking for the id
            try:
                userdetail = self.get_queryset().get(user=request.user)
            except UserDetail.DoesNotExist:
                userdetail = None
        else:
            userdetail = self.get_object()

        serializer = serializers.UserLogoSerializer(userdetail, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)            

        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

如果我没记错的话， permission_classes默认情况下是 Viewset 上的一组，默认解析器应该完成这项工作。