VUE前端处理后端接口返回的图片
我一个达不溜 2024-07-27 16:33:02 阅读 84
后端接口设计：
setting中配置文件上传路径：
<code>MEDIA_ROOT = BASE_DIR / 'yourFiles'
创建文件上传模型，使用FileField模型字段存储文件对象：
class UploadFile(models.Model):
"""上传文件模型"""
file = models.FileField('文件', help_text='文件上传')code>
info = models.JSONField('文件信息', help_text='文件信息', default=list, null=True, blank=True)code>
上传的文件保存在项目目录下的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'))code>
except:
return response.Response({'msg':'Not Found!'}, status=404)
调用接口返回图片文件：
前端处理
在axios封装的api请求中新增：
<code> // 查看图片
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);
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。