VUE前端处理后端接口返回的图片

后端接口设计：

• setting中配置文件上传路径：

MEDIA_ROOT = BASE_DIR / 'yourFiles'

• 创建文件上传模型，使用FileField模型字段存储文件对象： class UploadFile(models.Model): """上传文件模型""" file = models.FileField('文件', help_text='文件上传') info = models.JSONField('文件信息', help_text='文件信息', default=list, null=True, blank=True)

上传的文件保存在项目目录下的yourFiles目录下，部署以后，存放在容器的/app/yourFiles目录下

• 创建序列化器、配置urls等，在序列化器中新增一个方法，用于预览图片： class UploadFileViewSet(viewsets.ModelViewSet): """文件上传视图集""" queryset = UploadFile.objects.all() serializer_class = UploadFileSerializer ... @action(['get'], detail=True) def show(self, request, pk, *args, **kwargs): # 获取对象 try: instance = self.get_object() # instance.file.size() return FileResponse(instance.file.open(mode='rb')) except: return response.Response({'msg':'Not Found!'}, status=404)调用接口返回图片文件：

前端处理

在axios封装的api请求中新增：

   // 查看图片
    showImg(id){
        return api.get(`/upload/${id}/show/`, {responseType:'blob'})  // 后端返回的是一张图片，这里一定要加responseType
    },

注意这里一定要新增 {responseType:'blob'}。后端返回的是一个图片文件：

前端展示图片的方法中通过window.URL获取图片文件的URL,作为img标签的src值：

this.imageUrl = window.URL.createObjectURL(response.data);