全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

如何在Node中上传图像.js简单的方法

发布时间:2022-09-21 11:09:37
发布人:syq

  如何在Node中上传图像.js简单的方法?为了获得更好的用户体验,请了解如何使用节点.js和MongoDB将图像上传到云中。

1


  大纲

  ⭐ 设置用于图像上传的 Multer。

  ⭐ 将图像上传到云。

  ⭐ 将图像与蒙哥数据库链接。

  最近,我决定构建自己的REST API,以改善我的水果店网站的功能。

  通过付出很多努力,我能够为网站构建自己的REST API。在本地,一切都很完美,包括图形和产品数据。但是,当我将API放在Heroku上时,事情开始破裂。

2

  正如您在上面的图像中看到的,当我从服务器获取数据时,它返回了所有产品及其图像链接。

  但是,当我单击图像链接时,我收到错误而不是图像。

3

  从错误消息中可以看出,它表示该路由当前不可用。显然,这不是我想要的,所以我试图自己修复它。

  最后,经过大量研究,我想出了一个解决方案,我相信它也对你有用。

  这就是您将在本文中学到的有关将图像上传到云并使用Node.js和MongoDB将它们链接到数据库的内容。

  让我们潜入

  作为了解实际工作的一种方式,您的任务是创建一个包含用户姓名、电子邮件和图片的用户配置文件。

  先决条件

  雷霆客户端或邮递员用于API测试。

  代码编辑器。

  如果您能够理解初学者文件中的代码,那么您就很高兴了。

  让我们看看如何做到这一点

  获取初学者文件。

  打开终端并安装所有必需的软件包。

  注意 — 该项目遵循 REST API 体系结构。

  为了开始使用,您只需要创建一个环境文件并添加两个变量,MONGO_URI和端口。

  将 MongoDB 连接字符串粘贴到MONGO_URI中。

  让我们运行服务器。

4

  理想情况下,您应该得到像上图一样的结果。

  现在,让我们查看路由文件夹中的一些路由并对其进行测试。

5

  现在,让我们创建用户配置文件。

  第一步是将多部分数据导入到主文件中。

  首先为用户配置文件映像创建存储。

  法典

6

  代码说明

  分配应首先存储用户图像的文件夹。

  您可以通过将当前日期与随机生成的数字(最多为10亿)与原始文件扩展名连接来轻松创建唯一的文件名,如下所示:

  “文件名”: “1663478472266–946908179.jpg”

  为多部分数据创建处理程序

  创建函数句柄多部分数据

  在其上使用多路方法。

  Multer接受几个选项,但在您的情况下,您需要传递之前创建的存储配置和文件限制。

  并提供单个(“图像”)

7

  在主路由文件中使用句柄多.js数据

  完整代码

8

  是时候测试您的设置了。

  在 Thunder 客户端中,打开创建用户路由,然后输入用户名和带有配置文件的电子邮件。

9

  此外,您将在上传文件夹中找到任何文件。

  让我们发送请求,并希望一切正常。

10

  服务器使用用户和文件数据进行响应。

  您还可以注意到上载文件夹不再为空。

11

  一切都很好。

  现在,您可以将用户图像上传到服务器。

  将图像上传到云

  让我们继续第二步,您将图像上传到云中。

  对于此类项目,我建议使用Cloudinary,这是一种免费的基于云的服务,运行良好。

  以下是您需要遵循的步骤

  创建云帐户。

  创建帐户后,现在可以配置 Web 应用程序了。

12

  单击配置您的 SDK。

  选择“节点.js”选项。

13

  复制密钥。

  转到主.js文件中的创建用户路由。

  我强烈建议您将这些关键值存储在环境文件中。

14

  好吧,让我们编写一些代码,然后我们将启动。

  法典

15

  代码说明

  如果文件路径未定义,则代码仅返回。

  提供文件路径到云中.v2.uploader.upload 方法。

  让我们看看您的文件是否已成功上传到云。

  这很好,我们得到了结果。

16

  在上图中,您可以看到上传的文件链接以及用户数据。

  现在单击图像链接以打开图像。

17

  这很好,图像已成功上传到云中。

  完整代码

18

  将图像与数据库链接

  在模型的文件夹中打开 user.js,然后签出用户架构。

23

  如您所见,用户架构已经创建。欢迎您根据自己的要求进行定制。

  创建用户文档

  去创建一个新的数据库。

  在主.js文件中导入用户.js文件。

index(1)

  代码说明

  第 57 行 — 从 req. body 解构了名称和电子邮件。

  第 61 行 — 等待并使用用户.create() 方法创建用户。

  第 62 行 & 63 — 将名称和电子邮件对象传递到创建方法中。

  第 64 行 — 对于映像选项,分配云映像的安全 URL。

  现在是将用户数据上传到数据库中的时候了。

22

  在上面,您可以看到您的云映像和数据库已成功链接。

  您可以通过单击图像链接进行验证,它已准备好访问。

  您还可以检查数据库。

  结论

  借助这项新功能,您可以毫不费力地将图像从计算机上传到云中,从而使 Node.js 应用程序比以往更快、更高效地运行。

相关文章

在目标检测里single-shot和multi-shot的主要区别是什么?

在目标检测里single-shot和multi-shot的主要区别是什么?

2023-10-15
APP安全测试与普通B/S架构的渗透测试有什么区别?

APP安全测试与普通B/S架构的渗透测试有什么区别?

2023-10-15
什么是域控制器?

什么是域控制器?

2023-10-15
图卷积网络和self-attention有什么区别?

图卷积网络和self-attention有什么区别?

2023-10-15

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取