如何以简单的方式在 Node.js 中上传图片
如何以简单的方式在 Node.js 中上传图片
为了获得更好的用户体验，请了解如何使用 Node.js 和 MongoDB 将图像上传到云端。
大纲
⭐ 为图片上传设置 Multer。
⭐ 上传图片到云端。
⭐ 将图像与 MongoDB 数据库链接。
最近，我决定构建自己的 REST API 以改进我的水果店网站的功能。
经过一番努力，我能够为该网站构建自己的 REST API。在本地，一切都运行良好，包括图形和产品数据。然而，当我将我的 API 放在 Heroku 上时，事情开始出现问题。
我的意思，让我解释一下
- 正如您在上面的图片中看到的，当我从服务器获取数据时，它返回了所有产品及其图片链接。
- 但是，当我单击图像链接时，我得到一个错误而不是图像。
正如您从错误消息中看到的那样，它表示该路由当前不可用。显然，这不是我想要的，所以我试图自己修复它。
最后，经过大量研究，我想出了一个我相信也对你有用的解决方案。
这就是您将在本文中学到的关于将图像上传到 云 并将它们链接到 数据库 使用 节点.js 和 MongoDB .
让我们潜入
作为了解实际工作的一种方式，您的任务是创建一个包含用户姓名、电子邮件和图片的用户配置文件。
先决条件
- 用于 API 测试的 Thunder Client 或 Postman。
- 代码编辑器。
- 如果您能够理解起始文件中的代码，您就可以开始了。
让我们看看怎么做
- 获取启动文件。
[
GitHub - fk00750/upload-image-cloud
您目前无法执行该操作。您使用另一个选项卡或窗口登录。您在另一个选项卡中退出或...
github.com
](https://github.com/fk00750/upload-image-cloud)
- 打开您的终端并安装所有必需的软件包。
✍️ 笔记 — 该项目遵循 REST API 架构。
- 为了开始，您只需创建一个环境文件并添加两个变量 MONGO_URI 和 PORT。
- 将您的 MongoDB 连接字符串粘贴到 MONGO_URI 中。
- 让我们运行服务器。
理想情况下，您应该得到如上图所示的结果。
- 现在让我们检查一下路由文件夹中的一些路由并进行测试。
- 好的，现在让我们创建用户配置文件。
- 第一步是导入 鲻鱼 到您的多部分数据的主文件中。
- 首先为用户配置文件图像创建存储。
代码
代码说明
- 分配应首先存储用户图像的文件夹。
- 您可以通过将当前日期与最多 10 亿个随机生成的数字与原始文件扩展名连接起来，轻松创建一个唯一的文件名，如下所示：
“文件名”：“1663478472266–946908179.jpg”
为多部分数据创建处理程序
- 创建一个函数 处理多部分数据
- 使用 multer 方法。
- Multer 接受多个选项，但在您的情况下，您需要传递您之前创建的存储配置和文件限制。
- 并提供一个（“图像”）
- 在 main.js 路由文件中使用 handleMultipartData
完整代码
是时候测试你的设置了。
在迅雷客户端中，打开创建用户路由并输入用户名和带有配置文件的电子邮件。
- 此外，您将在上传文件夹中找不到任何文件。
- 让我们发送请求，希望一切正常。
- 服务器响应了 用户 和 文件 数据。
- 您还可以注意到上传文件夹不再为空。
- 一切正常。
- 现在可以上传了 用户 图像到服务器。
上传图片到云端
- 让我们继续第二步，将图像上传到云端。
- 对于此类项目，我建议使用 Cloudinary，这是一种运行良好的免费的基于云的服务。
[
图片和视频上传、存储、优化和CDN
转换图像和视频以更快地加载而不会降低视觉效果，自动生成图像和视频变体......
cloudinary.com
以下是您需要遵循的步骤
- 创建一个 Cloudinary 帐户。
- 创建帐户后，现在是时候配置您的 Web 应用程序了。
- 单击配置您的 SDK。
- 选择 Node.js 选项。
- 复制密钥。
- 转到中的创建用户路由 main.js 文件。
- 我强烈建议您将这些键值存储在您的环境文件中。
好吧，让我们编写一些代码，然后我们将启动。
代码
代码说明
- 如果 filePath 未定义，则代码仅返回。
- 将 filePath 提供到 cloudinary.v2.uploader.upload 方法中。
让我们看看您的文件是否已成功上传到云端。
- 太好了，我们得到了结果。
- 在上图中，您可以看到您上传的文件链接以及用户数据。
- 现在单击图像链接以打开图像。
- 太好了，图像已成功上传到云端。
完整代码
将图像与数据库链接
- 打开 用户.js 在模型的文件夹中并检查用户模式。
- 如您所见，用户模式已经创建。欢迎您根据自己的要求进行定制。
创建用户文档
- 去创建一个新的数据库。
- 在 main.js 文件中导入 user.js 文件。
代码说明
- 第 57 行——从 req. 解构名称和电子邮件。身体。
- 第 61 行 — 使用 User.create() 方法等待并创建用户。
- 第 62 和 63 行——将名称和电子邮件对象传递给 create 方法。
- 第 64 行 — 为图像选项分配云图像的安全 URL。
⌛ 是时候将用户数据上传到数据库了。
- 上图可以看到你的云镜像和数据库已经成功链接了。
- 您可以通过单击图像链接进行验证，它已准备好访问。
- 您还可以检查您的数据库。
结论
借助这项新功能，您可以毫不费力地将图像从计算机上传到云端，从而使您的 Node.js 应用程序运行得比以往更快、更高效。
如有任何疑问和建议，请随时与我联系 推特 ✌
更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
