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实例代码,具有一定的参考价值,有兴趣的可以了解一下2017-05-05使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论