图像到 base64 并上传到 MERN 中的 MongoDB

Question

您好，感谢大家的帮助。

所以我想为我的项目寻求帮助。

所以我想做的是在 posted，

之后从反应中获取图像

然后将其转换为 base64，这样我就可以使用 mongoose，

post 到 mongo

最后，能够显示，但是在所有这些过程中，

我不想使用本地保存或在任何云中。

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

请分享您的想法。

-待在家里

Answer 1

反应：上传 对于 Base64 转换，您可以：

您可以使用简单的 javascript 来实现。参考更多 here
更好的是，将 NPM 的优势用于 React。使用某人已经内置的库。为此 documentation looks awesome for it. Here's the demo。

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

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

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

路线
控制器
型号

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

猫鼬和MongoDB 将它们连接到 MongoDB。这方面有很多资源，例如 this.

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

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

使用 HTML 并做出反应，您可以创建它。更多信息 here

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

图像到 base64 并上传到 MERN 中的 MongoDB

Image to base64 and upload to MongoDB in MERN

base64

mongoose

mongodb

node.js

mern