时间戳

首页 > 解决方案 > Google Cloud Storage - 如何通过前端使用 Vue 上传图片

google-cloud-platform - Google Cloud Storage - 如何通过前端使用 Vue 上传图片

问题描述

我有一个在 Vue 中构建前端和在 express 中构建后端的应用程序，我有一个可以为我的网站上传图片的功能。现在我正在使用 cloudinary，它非常易于使用，我可以在前端进行上传：

<upload action=https://api.cloudinary.com/v1_1/devenv/image/upload></upload>

它会返回我可以用来提供图像的 URL。

我想知道Google Cloud Storage是否有类似的URL，我查阅了文档，推荐的方式是使用nodejs客户端。那么我是否必须在后端编写一个端点才能使此上传工作？

此外，后端上传的另一个问题是authenticationGoogle 客户端使用 JSON 文件进行身份验证，这对于开发来说没问题，但是如果我的后端在 GCP kubernetes 引擎上运行，我应该为生产做什么，有什么办法可以将它们连接在一起不将 JSON 文件放入 Docker 容器中？

帮助和代码示例将不胜感激！

标签： google-cloud-platformgoogle-cloud-storagefrontendimage-uploading

解决方案

要允许用户通过表单 POST 将对象上传到 GCS，您需要创建一个“策略文档”来描述用户可以上传的对象类型，然后对其进行签名，然后将该签名文档作为参数传递给形式。您可以在此处阅读有关通过 POST 上传到 GCS 的更多信息：https ://cloud.google.com/storage/docs/xml-api/post-object

并特别注意此处签署的政策文件部分： https ://cloud.google.com/storage/docs/xml-api/post-object#policydocument

这是一个示例策略文档：

{
 "expiration": "2010-06-16T11:11:11Z",
 "conditions": [
  ["starts-with", "$key", "" ],
  {"acl": "bucket-owner-read" },
  {"bucket": "travel-maps"},
  {"success_action_redirect": "http://www.example.com/success_notification.html" },
  ["eq", "$Content-Type", "image/jpeg" ],
  ["content-length-range", 0, 1000000]
  ]
}

然后，您将对该文档进行 base64 处理，使用您希望用户为上传而充当的服务帐户的私钥对结果进行签名，然后在隐藏字段中提供它们，如下所示：

<input type="hidden" name="policy" value="eyJleHBpcmF0aW9uIjogIjIwMTAtMDYtMTZUMTE6MTE6MTFaIiwNCiAiY29uZGl0aW9ucyI6IFsNCiAgWyJzdGFydHMtd2l0aCIsICJrZXkiLCAiIiBdLA0KICB7ImFjbCI6ICJidWNrZXQtb3duZXItcmVhZCIgfSwNCiAgeyJidWNrZXQiOiAidHJhdmVsLW1hcHMifSwNCiAgeyJzdWNjZXNzX2FjdGlvbl9yZWRpcmVjdCI6ICJodHRwOi8vd3d3LmV4YW1wbGUuY29tL3N1Y2Nlc3Nfbm90aWZpY2F0aW9uLmh0bWwiIH0sDQogIFsiZXEiLCAiQ29udGVudC1UeXBlIiwgImltYWdlL2pwZWciIF0sDQogIFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCAwLCAxMDAwMDAwXQ0KICBdDQp9">
<input type="hidden" name="signature" value="BSAMPLEaASAMPLE6SAMPLE+SAMPPLEqSAMPLEPSAMPLE+SAMPLEgSAMPLEzCPlgWREeF7oPGowkeKk7J4WApzkzxERdOQmAdrvshKSzUHg8Jqp1lw9tbiJfE2ExdOOIoJVmGLoDeAGnfzCd4fTsWcLbal9sFpqXsQI8IQi1493mw=">

策略文档是一个使用 base64 编码的 JSON 字符串，并作为 POST 请求的一部分作为隐藏输入传递给 GCS。您可以在代码中将其声明为常量，也可以使用 JSON 和 base64 库即时生成一个常量。

推荐阅读