时间戳

首页 > 解决方案 > 图像到 base64 并上传到 MERN 中的 MongoDB

node.js - 图像到 base64 并上传到 MERN 中的 MongoDB

问题描述

您好，感谢大家的帮助。

所以我想帮助我的项目。

所以我想要发生的是在发布后从反应中获取图像，

然后将其转换为base64，以便我可以使用猫鼬发布到mongo，

最后，能够展示它，但在这一切的过程中，

我不想使用本地储蓄或任何云。

有谁知道如何做到这一点？

请分享你的想法。

-呆在家里

标签： node.jsmongodbmongoosebase64mern

解决方案

React：上传 Base64 转换，您可以：

  1. 您可以使用纯 javascript 来完成此操作。在这里参考更多
  2. 更好的是，将 NPM 的优势用于 React。使用某人已经内置的库。这个文档看起来很棒。这是它的演示。

将其转换为 base64 后。我假设您将在反应状态中存储详细信息，您现在可以向您的服务器发出一些 AJAX 请求。

Express 和 Node：接收数据在您到达必须编写 API 的部分之前，大部分都是样板代码。对于这一部分，您将需要在您指定的特定路由上创建一个 API，该 API 将接受POST方法。

要查看的三个重要文件夹：

  1. 路线
  2. 控制器
  3. 楷模

路由将成为 API 的入口点，并将使用控制器中定义的函数。这些控制器是使用基于您将创建的模型的猫鼬函数制作的。在这种情况下，您可能需要的控制器是 CREATE 和 READ。

Mongoose 和 MongoDB 将它们连接到 MongoDB。有很多资源，例如this。

Express 和 Node：提供数据 一旦你完成了数据库模型和控制器。您将拥有一个控制器，用于获取数据库中的特定数据。现在您可以创建一个将服务于该 API 的路由，通常在GET方法中。

React：接收存储的图像 在您需要图像的页面中，您可以执行 AJAX 请求componentDidMount并将数据存储在状态中。

使用 HTML 和 react，您可以创建它。更多信息在这里

<div>
   <p>Taken from wikpedia</p>
   <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
   AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

推荐阅读