千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 如何在Node中上传图像.js简单的方法

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

来源:千锋教育
发布人:syq
时间: 2022-09-21 11:09:37 1663729777

  如何在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 应用程序比以往更快、更高效地运行。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT