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);