图像和视频使用NextJS服务器端，Multer和XATA数据库上传到Cloudinary
#javascript #nextjs #xata #cloudinary

Uploading a file to the cloud. Image by rawpixel.com on Freepik

现在已经上传了一个文件，无论是在时间后消失还是存储在在线数据库中，可能就不足为奇了。因此，必须创建启用文件上传的应用程序。使用NextJS服务器端，可以实现此功能。

本文分为两部分。在第一部分中，我们将讨论前端，我们将在其中讨论我们的项目的作用和所需的工具。然后，第二部分是关于实现图像和视频上传到云以及如何在XATA数据库中持续数据。

我们正在建造什么

该项目是用于记忆的数字抽认卡。抽认卡有助于学习想要记住的东西。物理抽认卡具有正面和背面；正面通常提出一个问题，反向通常提供解决方案。数字抽认卡允许我们添加图像和视频，以帮助我们更好地记住一个想法，代码，国家的旗帜等。

下面列出了抽认卡的优点。

  • 它有助于增强视觉记忆。
  • 他们促进学习率并不断便携。
  • 对于首字母缩写词，数学公式，算法代码等，抽认卡很有启发性。
  • 这是负担得起的。

github url

https://github.com/Theodore-Kelechukwu-Onyejiaku/hackmamba-xata-cloudinary-project

现场网址

http://hackmamba-xata-cloudinary-project.vercel.app/

前端

我们工作的前端部分涉及我们如何与上面共享的实时URL所看到的项目互动。这是用于前端的工具。

前端工具

使用npm i <tool_name>命令我们可以安装它们。

  • aos：当我们向下滚动应用程序时，它用于卡片的动画。
  • react-icons：用于在我们的项目中显示图标。
  • react-quill：适用于Wysiwyg编辑器添加 front 和 back content。
  • react-toastify：这用于我们的应用程序中的吐司通知。
  • tailwind CSS：这是我们应用程序的主要CSS。请注意，该项目中使用了其他自定义CSS。访问上面的github URL查看全部。

前端逻辑

这是我们应用程序的逻辑。

  • 用户通过使用凭据或GitHub提供商（电子邮件和密码）来注册。在GitHub URL中查看“页面/auth/ignup”的文件。
  • 成功注册后，用户将路由到登录页面“页面/auth/signin”。
  • 成功登录后，用户可以查看其他用户制作的所有卡。
  • 我们可以从制作卡，查看我们的收藏和卡，根据其名称或类别搜索卡，在黑暗和灯光设置（例如卡片）之间进行切换以及观看视频的选项。
  • 必须在创建卡之前添加卡名称，类别，图像，可选视频和前后内容。
  • 用户可以开始翻转卡以练习记忆，电影和视觉效果将帮助他们发展记忆。
  • 是该卡的用户创建卡后可以更新或删除该卡的用户。
  • 用户可以通过单击加号符号而不是其所有者，在其收藏中添加新鲜制作的卡。
  • 有三个编辑卡的选项。我们可以选择仅更新卡的图像，视频或其他信息。
  • 我们可以通过将其名称或类别键入搜索框来搜索卡。

下面是前端逻辑的高级模型：

HLM for Digital Flashcard Project

访问上面的实时URL查看应用程序。

后端

云安装和配置

1。安装云

运行此命令。

npm install cloudinary

2。创建一个云帐户

我们需要我们的云云名称，API密钥和API秘密才能继续进行。前往Cloudinary网站here获得这三个。

单击“仪表板”选项卡。在那里，我们将找到我们的API密钥，API秘密和云名称。

Get the Cloud Name, API Key and API Secret of Our Cloudinary Account

单击设置，然后单击上传。那里* ，*您可以添加预设。
给出名称和文件夹值 flashcard '，然后单击“ save” 。

。

Create a Preset on Cloudinary

3。将云详细信息添加到.env.local文件

创建一个.env.local文件并添加以下内容。

// .env.local
CLOUDINARY_API_KEY=<our_key>
CLOUDINARY_API_SECRET=<our_api_secret>
CLOUDINARY_NAME=<our_cloud_name>

4。创建云配置文件

在我们项目的根部创建一个名为utils的文件夹。在其中，创建一个文件cloudinary.js并添加以下代码。

XATA安装和设置

1。创建一个XATA帐户。

单击此link以创建一个XATA帐户。

2.创建数据库和表

如果我们是XATA创建桌子的新手，请阅读并访问这些链接https://xata.io/docs/intro/getting-started和https://xata.io/docs/quickstart/index。现在，创建一个称为测试或的数据库。之后，创建以下表：

用户表

Users Table

卡表

Cards Table

3。安装XATA数据库

观看视频here并查看此安装文档。或，

  • 安装XATA CLI： 
npm install -g @xata/cli
  • 接下来，使用XATA数据库连接： 
xata auth login

我们选择'终端提示我们时在浏览器中创建一个新的API密钥。这打开了浏览器。我们输入API键的名称。

Generating an API key for our Xata CLI

如果成功，我们将在浏览器页面上看到它。

Successful Authentication of Xata CLI

一条消息 - 全部！您现在可以开始使用Xataâ将显示在我们的终端上。

  • 用XATA初始化我们的项目 
xata init

我们在终端提示期间选择以下内容；

  • 选择现有数据库或抽认卡。
  • 选择“使用ES模块生成JavaScript代码”，您想在我们的项目中使用代码生成。
  • 键入“ utils/xata”以选择代码生成器的输出文件。
  • 选择“不想生成Typescript声明？”。
  • 选择一个默认开发分支（后备分支） - 选择主要。
  • 最后，因为您要创建一个.gitignore文件并忽略.env文件？，选择“是”。

完成后，我们应该看到消息 -

确保选择utils/xata作为我们的XATA CodeGen文件所在的位置。如果成功，我们的xata.js文件应该看起来像这样：

上传图像和视频

由于将在NextJS服务器端完成，因此将安装以下软件包。

npm i bcrypt datauri multer next-auth next-connect
  • bcrypt：这将有助于身份验证，哈希密码和验证。
  • datauri：将帮助我们将解析的文件（图像和视频）转换为基础64个编码。
  • multer：将帮助我们解析请求主体。
  • next-auth：这将添加身份验证。
  • 下一步连接：这将有助于我们将Multer作为中间件添加到路由处理程序中。

创建一个create-card.js文件

我们必须创建一张卡来上传图像和视频。因此，在pages文件夹的api文件夹中创建一个名为create-card.js的文件。

这将处理到/api/create-card的任何发布请求。因此，前端将发送表单数据，包括我们要上传的图像和视频。

  • 第1行：我们导入软件包next-connnect。
  • 第9行：我们创建一个新的XATA实例。
  • 第20行：我们应用Multer中间件。 multer 中间件可确保使用any()方法解析任何文件。我们将每张卡的图像和视频存储在变量image和video中的图像和视频中，行30 和 31。。
  • 第33行：我们创建datauri/parser实例将解析的文件转换为基本64编码文件。这样，我们可以上传行40 和 47 中生成的图像和视频。
    • 。
  • 行36-40 ：在这里，我们将解析的图像文件转换为基本64编码以上传为云。这是使用Cloudinary SDK的uploader.upload()方法完成的。请注意，我们在上传预设中传递了flashcards,和一个选项{ resource_type: 'image' }告诉Cloudinary这是我们要上传的图像。此方法返回响应，包括创建的新图像的URL，该响应存储在数据库中为image。
  • 行43-47 ：与行36-40 相同。唯一的区别是这次，我们告诉Cloudinary这是一个视频{ resource_type: 'video' }。
  • 行60-73 ：我们通过调用XATA的create()函数并从前端传递值来创建新卡。

请参阅线中的前端发送的内容 s 115-126 下面。

更新现有图像
更新云中现有图像也意味着更新我们的卡。创建一个名为update-card-image.js的新的API路由处理程序。

与create-card.js没有太大的区别。

  • 第17行：我们告诉Multer，它应该解析一个名为image的单个文件。这是从前端的表单数据图像的名称。
  • 行37 ：我们通过调用Cloudinary destroy()方法来删除卡的现有云图像。此方法仅需要图像的ID才能删除。
  • 第43行：我们使用新的图像URL，ID和签名更新卡。

更新现有视频
这与上面的代码相同。我们将创建一个名为update-card-video的新文件。唯一的区别是，这次我们告诉Multer在第17行中解析一个名为视频的文件。请参阅下面的代码：

删除图像和视频

在删除卡时，我们从而删除了图像和视频。

  • 第21和26行：我们称Cloudinary destroy()方法并传递了我们要删除卡的图像ID和视频ID。
  • 第30行：我们通过传递我们要删除的卡的ID来调用XATA的delete()方法。

结论

在本文中，我们通过NextJS服务器端查看了将图像和视频上传到Cloudinary，并使用XATA在数据库中持续存在数据。本文的GitHub URL部分中提供了前端和完整代码。再一次，请访问此处获取live application。