时间戳

首页 > 解决方案 > 在 vue.js 中将图像处理为 rest api 响应的最佳方法

laravel - 在 vue.js 中将图像处理为 rest api 响应的最佳方法

问题描述

我在 laravel 上写了 Rest api，在 vue.js 上写了前端。它是电子商务商店的仪表板，您可以在其中连接到发货服务 api 以上传订单发货数据并获取跟踪号（带有 .png 标签）。因此，在我从邮政服务 api 收到跟踪号标签后，我需要有可能从 rest api 响应中将其显示在前端。

我在前端有路线shipments/66/tracking/label，应该显示一些货运数据和跟踪标签图像

我有两个解决方案。

  1. 在一个后端路由 GET 中以 base64 字符串和发货数据的形式发送图像内容shipments/{id}/tracking/label

后端

   $data = [
        'label' => base64_encode(Storage::cloud()->get($path)),
        'shipment' => $shipment
   ];

   return response()->json(['data' => $data]);

前端

<img :src="`data:image/png;base64,${data.label}`"/>
  1. 对所有货件数据使用 2 个不同的后端路由 GET shipments/{id}，另一个用于仅图像 GET shipments/{id}/tracking_label，它将返回带有标题的图像

后端

获取所有货件数据

return response()->json($shipment)

获取货件追踪标签图片

return response(Storage::cloud()->get($path))->header('content-type', 'image\png')

前端

<img :src="`${BASEAPIURL}/shipments/{id}/tracking/label`"/>

它将从 api 路由在浏览器中上传我的图像

并发送另一个请求以获取所有货件数据并在前端显示

我喜欢解决方案#2，但如果我将有 10 批货物用于显示跟踪号标签，我将有 10 次 api 调用来获取它们每个的图像，还有一个用于通过 ids 获取货物数据数组。在解决方案 #1 中，我只能为所有货物获得一个 api 调用，其中每个货物都有数据和 base64 图像。

将图像作为rest api响应发送并使用js前端显示的最佳实践是什么？

标签： laravelimagerestvue.jsbase64

解决方案

推荐阅读