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处理后端接口返回图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！