如何在没有服务器的情况下在 React 中上传图像？答案

【问题标题】：How to upload an image in React without a server?如何在没有服务器的情况下在 React 中上传图像？
【发布时间】：2021-07-17 16:15:30
【问题描述】：

我的 react 应用中有一个用于图像的引导输入字段。当我通过它上传图片时，我想获取该图片的公共 URL，以便我可以在应用程序的其他部分重复使用它。

<div class="mb-3">
  <label for="formFile" class="form-label">Product Image</label>
  <input class="form-control" type="file" id="formFile">
</div>

我看到人们连接到类似 google drive 的 API 并上传图片以获得一种可共享的链接。有没有办法在客户端做到这一点？

感谢您的通知:)

【问题讨论】：

我很困惑，你是说你可以上传到第 3 方系统（即 Google Drive、imgur 等）吗？即使这样，您也必须有某种方式来协调共享对该托管文件的引用，这又意味着数据库和服务器。
我是这个话题的新手，所以任何快速入门的方法都可以。

【解决方案1】：

使用 google drive 作为后端是一种解决方案，their API 是一个很好的起点。一般来说，恕我直言，您想探索“无服务器”概念。亚马逊在这方面提供了很多服务。

【讨论】：

【解决方案2】：

不，您必须有一个可公开访问的系统来提供图像。这意味着服务器。

如果不涉及一些类型的第 3 方系统/服务器，我想不出任何办法来解决这个问题。即使您要做一些涉及通过 WebRTC 共享图像的点对点系统，您仍然需要一个信令服务器来建立客户端之间的初始连接。

应用以通用方式处理内容共享的方式是用户将前端的图像上传到某个内容存储库。这可能是您自己的内容存储库或某些 3rd 方网站，如 imgur、Google Drive 等。一旦上传，指向该公开内容的链接将由您自己的应用程序存储，然后以某种方式使用，例如显示在用户的内容板或个人资料。

例如，Stack Overflow 本身与 Imgur 集成，因此每当您需要上传图片以配合您的问题/答案时，它都会与您的帖子相关联并由 imgur 托管。 SO 仍然必须调查所有相关的东西，比如知道谁上传了什么以及它与将其放在帖子中的何处相关的问题。

提供完整的解决方案过于宽泛，但可能的鸟瞰图可能类似于：

请记住，执行所有这些操作相当复杂，并且每当您必须处理上传非法内容的人时，策划内容也是一项巨大的工作。 p>

【讨论】：