后端实时生成图片,前端VUE如何获取并展示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了后端实时生成图片,前端VUE如何获取并展示相关的知识,希望对你有一定的参考价值。

参考技术A 用blob的方式获取后端实时生成的图片,在图片生成之后再显示,生成中加载loading

getBlobPic(works)

      axios(

        method:"get",

        url:'/api/competition/my-works-basecert?works_id=' + works.id,

        responseType:'blob'

      ).then((response)=>

        if(response.status===200)

          const data,headers=response

          const blob=new Blob([data], type:headers['content-type'] )

          this.certificateImg=window.URL.createObjectURL(blob)

          this.certificateloading=false;

        else

          this.certificateloading=false;

       

      ).catch((error)=>

        this.certificateloading=false;

      )

   

如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示

【中文标题】如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示【英文标题】:How to get data from Laravel backend and display in Vue/Nuxt frontend 【发布时间】:2020-07-18 21:37:55 【问题描述】:

我有一个 Vue/Nuxt 前端,它可以正常工作,还有一个连接到我的数据库的 Laravel 后端。

我的问题是如何连接两者并在我的 Vue 页面中显示来自 db 的数据。

如果我使用php artisan serve 运行应用程序,我会从数据库中获得正确的数据,但我不能使用 Nuxt/Vue 的页面转换和仅组件刷新。如果我使用 npm run dev 运行应用程序,我会获得页面转换和仅组件刷新,但从我的 Axios 请求返回的数据是发送页面的 HTML。

所以我假设这是某种异步问题,但我对此很陌生,不知道该怎么做。

任何提示或建议都会有很大帮助。

axios 请求:

created() 
    const  data  = this.$axios
      .get("/items")
      .then((res) => 
        console.log(res);
      )
      .catch((err) => 
        console.log(err);
      );
  ,

我没有包含我的控制器、模型等,因为它通过 Laravel 服务器运行,所以我假设它们设置良好。不过,如果需要,我可以将它们编辑到帖子中。

【问题讨论】:

你能通过使用普通浏览器让 laravel 像你期望的那样响应请求吗?例如,如果您使用浏览器访问 /items 页面会发生什么? @FrancescoManicardi 我得到 '404 not found' @FrancescoManicardi 实际上,如果我使用 /api/items 我会在浏览器中获取 json 数据 您只是使用了错误的 API 网址。在 axios config 中设置正确的 baseUrl 并在 .get() 中使用正确的 url,它必须工作 @FrancescoManicardi api 在我的 nuxt.config.js 文件中,所以我的 Axios 请求不需要它 【参考方案1】:

您必须使用包dotenv。然后在nuxt.config.js的第一行:

require("dotenv").config()

这是我在 nuxt.config.js 中的 axios 设置:

/*
   ** Axios configuration
   */
  axios: 
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL,
    headers: 
      common: 
        Accept: "application/json"
      
    
  ,

这对我来说很好。如果您仍然无法接收 API 数据,请从开发人员工具中检查网络选项卡。检查是否有任何请求被触发,如果有,请检查 url 和可能的响应(如果有)。

【讨论】:

您是否为此运行npm run devphp artisan serve 我必须分开项目:一个带有 API 的 Laravel 项目和一个 Nuxt 项目。所以我需要分别运行它们。我认为你应该同时运行这两个命令。 我得到的只是:Access to XMLHttpRequest at 'http://localhost:8000/items' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 我认为你需要包含 laravel-cors:packagist.org/packages/barryvdh/laravel-cors URL 不应该是:http://localhost:8000/api/items 而不是http://localhost:8000/items 吗?

以上是关于后端实时生成图片,前端VUE如何获取并展示的主要内容,如果未能解决你的问题,请参考以下文章

怎么看前端有没有展示后端的数据

vue如何遍历后端数据

前端发送数据到后端

如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示

Vue axios中post获取到一个对象,如何展示对象中的二进制图片?

前端批量上传图片后端怎么接收?