如何将图像从 Django Rest Api 发送到 Vue SPA？答案

【问题标题】：How can I send images from Django Rest Api to a Vue SPA?如何将图像从 Django Rest Api 发送到 Vue SPA？
【发布时间】：2019-04-06 19:30:55
【问题描述】：

我正在开发一个在后端使用 DRF REST api 的 Vue.js 2.0 单页应用程序。我将图像存储在文件系统中，并且我的一个模型有一个名为“图像”的字段，其中包含图像的地址。

我的模特：

class Board(models.Model):
    name = models.CharField(max_length=100)
    description = models.CharField(max_length=400)
    image = models.FileField(upload_to='boards/')
    safe_for_work = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)

视图集：

class BoardViewSet(viewsets.ViewSet):
    serializer_class = BoardSerializer

    def list(self, request,):
        queryset = Board.objects.filter()
        serializer = BoardSerializer(queryset, many=True)
        return Response(serializer.data)

    def retrieve(self, request, pk=None):
        queryset = Board.objects.filter()
        board = get_object_or_404(queryset, pk=pk)
        serializer = BoardSerializer(board)
        return Response(serializer.data)

当我从我的 Vue SPA 调用我的端点时，我只获取本地 url，而不是获取图像，例如 "/storage/boards/board1.jpg"。

如何访问我的 Vue 页面上的实际图像？

理想情况下，我想从端点获取所有图像的列表并显示它们。

【问题讨论】：

你想获取完整的 url还是base64编码的图片？
我想知道是否可以发送图像，以及它是否是处理此问题的正确方法。
this 能解决您的问题吗？

标签： python django django-rest-framework vuejs2

【解决方案1】：

对于这个问题，您必须在服务器（Django Rest）而不是 Vue 客户端中进行配置。配置您的序列化程序以显示图像的完整路径：

class BoardSerializer(ModelViewSet)
     image = FileField(source='image')
     class Meta:
        model = Article
        fields = [
            'id',
            'image',
            ...
        ]

不要忘记 Viewset 中的context: { 'request': request }

def list(self, request,):
        queryset = Board.objects.filter()
        serializer = BoardSerializer(queryset, many=True, context: { 'request': request })
        return Response(serializer.data)

    def retrieve(self, request, pk=None):
        queryset = Board.objects.filter()
        board = get_object_or_404(queryset, pk=pk)
        serializer = BoardSerializer(board, context: { 'request': request })
        return Response(serializer.data)

希望对你有帮助！

【讨论】：