VUE前端如何处理后端接口返回的图片详解

 更新时间:2024年09月28日 11:20:38   作者:我一个达不溜  
在现代Web开发中,前端应用经常需要从后端接口获取图片数据,下面这篇文章主要介绍了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);

总结

到此这篇关于VUE前端如何处理后端接口返回的图片的文章就介绍到这了,更多相关VUE处理后端接口返回图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-cli+webpack在生成的项目中使用bootstrap实例代码

    vue-cli+webpack在生成的项目中使用bootstrap实例代码

    本篇文章主要介绍了vue-cli+webpack在生成的项目中使用bootstrap实例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-05-05
  • vue实现登录注册模板的示例代码

    vue实现登录注册模板的示例代码

    这篇文章主要介绍了vue实现登录注册模板的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue中img或元素背景图片无法显示或路径错误的解决

    vue中img或元素背景图片无法显示或路径错误的解决

    这篇文章主要介绍了vue中img或元素背景图片无法显示或路径错误的解决方案,具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 动态生成拓扑图的示例

    vue 动态生成拓扑图的示例

    这篇文章主要介绍了vue 动态生成拓扑图的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Element MessageBox弹框的具体使用

    Element MessageBox弹框的具体使用

    这篇文章主要介绍了Element MessageBox弹框的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue3+Vite使用双token实现无感刷新

    Vue3+Vite使用双token实现无感刷新

    本文主要介绍了Vue3+Vite使用双token实现无感刷新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    使用Vue.js和Element-UI做一个简单登录页面的实例

    下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 如何将HTML页面改写到vue项目中详解

    如何将HTML页面改写到vue项目中详解

    html和vue都是前端技术中非常重要的一部分,其中html是web开发的基石,而vue则是现代化的前端开发框架之一,下面这篇文章主要给大家介绍了关于如何将HTML页面改写到vue项目中的相关资料,需要的朋友可以参考下
    2024-08-08
  • 浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验

    浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验

    这次我想给大家介绍的内存泄漏的定位方法,并非工具的使用。而是一些经验的总结,也就是我所知道的 VueJS SSR 中最容易出现内存泄漏的地方,非常具有实用价值,需要的朋友可以参考下
    2018-12-12
  • Vue-cli搭建spa项目的项目实践

    Vue-cli搭建spa项目的项目实践

    本文主要介绍了Vue-cli搭建spa项目的项目实践,首先,你需要安装Vue CLI,然后通过它创建新项目,接着,选择和配置适当的插件和依赖项,以完善你的SPA项目,感兴趣的可以了解一下
    2023-09-09

最新评论