后端接口設計：

• setting中配置文件上傳路徑：

MEDIA_ROOT = BASE_DIR / 'yourFiles'

• 創(chuàng)建文件上傳模型，使用FileField模型字段存儲文件對象：

  class UploadFile(models.Model):
      """上傳文件模型"""
      file = models.FileField('文件', help_text='文件上傳')
      info = models.JSONField('文件信息', help_text='文件信息', default=list, null=True, blank=True)

上傳的文件保存在項目目錄下的yourFiles目錄下，部署以后，存放在容器的/app/yourFiles目錄下

• 創(chuàng)建序列化器、配置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)

  調(diào)用接口返回圖片文件：

  

前端處理

在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處理后端接口返回圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論