在单页面应用程序中使用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发布数据：

我从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);
        });
}

如何使用POST数据在Django和Django Rest Framework的模型视图集类中使用默认方法（create/update/partial_update）或通过创建新的详细路由来创建或更新 request.user 的 profile_picture ？

- Robin

---

你是否正在传递一个base64编码的图片？ - Shift 'n Tab

如果是这样，这是一个很好的答案 https://dev59.com/H14c5IYBdhLWcg3wVpFI#28036805 - Shift 'n Tab

@ShiftN'Tab 不是那个问题。 - Robin

也许这会对你有所帮助：https://stackoverflow.com/questions/43319993/how-to-write-django-rest-api-without-model-to-send-a-file-using-requests - user2881430

Answer 1

假设您的 JS 使用 'multipart/form-data'（请查看此处）发送请求，那么在创建或更新用户时，您应该能够上传图像文件。此外，请确保您发送CSRF 令牌。 要能够单独设置徽标，使用detailed_route是一个不错的方法，使用一个仅限于徽标的序列化器。 在详细路由中，如果您想为已登录用户上传日志（我看到您将none作为ID），则可以在调用get_object之前检查详细路由中的详情，该函数将获取用户详细信息实例。

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上设置的，而默认的解析器应该可以胜任。

- Michael Rigoni

Answer 2

以下是官方文档中的示例：

http://www.django-rest-framework.org/api-guide/parsers/#fileuploadparser

该链接提供了关于文件上传解析器的详细信息。

- pkisztelinski

---

我该如何在模型视图集中使用它进行发布？ - Robin

@Robin 或许这篇帖子能对你有所帮助？https://dev59.com/X4Tba4cB1Zd3GeqP-8UE#26766210 - pkisztelinski