Formik —处理文件和验证码

Formik徽标

这篇文章的目的是向人们展示一些开始使用Formik时可能会遇到的麻烦 。

如果您还不了解Formik，请参阅其Github或这些帖子：

• React和Formik带来的形式喜悦
• 使用Formik更好的React形式
• Formik的无痛React形式 （由我撰写）

为了演示的目的，我将使这些示例简单易懂。 我还将故意遗漏一些功能，以便最终向您提出一些挑战！

上传一个文件📎

我敢肯定，我们所有人都尝试过以表格形式上传文件。 在Formik文档中，没有文件上传的指示或指示，但是就像处理react-select选择框一样简单。

您真正需要的就是输入Formik的值（在本例中为file），然后设置 onChange以使用Formiks的setFieldValue函数。 请记住，我们可以使用event.currentTarget.files [0]轻松访问上传的文件！

很简单，因为：

Formik为您保留File对象。 您可以用它做任何您想做的事。 获取名称，大小和类型？

因此，使用所有这些数据，您可以在输入下方的小缩略图中显示图像，如下所示：

缩略图示例

请查看下面的CodeSandbox.io示例，以了解如何轻松完成此操作。 对于缩略图的生成，我非常简单。 无需花哨的东西进行演示。

一个文件上传的缩略图示例

上载多个文件

我们已经看到一个文件上传，但是多个文件呢？ 还有一个下降区？ 还有这些文件的缩略图？

我将使用出色的react-dropzone lib处理所有这些dropzone细节。 我还将重复使用上一个示例中的Thumbnail组件，以使事情变得简单。

这将是最终结果

上传了3个文件

Formik使处理此类事情变得容易。 setFieldValue是您所需要的。 基本上，您可以跟踪文件数组并执行所需的所有操作。 随意使用下面的CodeSandbox.io示例！

多文件上传示例

reCaptcha支持🔐

我敢打赌，过去几乎每个人都与某种形式的Google r eCaptcha进行了互动。 甚至在今天，您还填写了表格并在方框中打了勾，或玩了小游戏来证明您不是机器人。 重点是，当人们希望通过不断提交表单来防止机器人向其发送垃圾邮件时，reCaptchas很常见。

让我告诉您如何处理表格上的简单Recaptcha。 例如，我将使用react-recaptcha包来获取api连接。

我使用了仅用于演示目的的密钥。 如果在您阅读本文时由于某种原因它掉线了，请随意输入并尝试一下。

Google reCaptcha v2示例

什么？！ you您期望更多的工作吗？ 记住Formiks的目标

是使用最小的API创建一个可扩展的，高性能的表单帮助程序，该API可以处理真正令人讨厌的事情，其余的工作交给您。

好吧，我们可以简单地使用setFieldValue函数自己控制它并以值形式处理它。 稍后，您将其提交给服务器，并对给出的reCaptcha响应执行服务器端验证！

全部一起！ 💯

大！ 您已经走了这么远，现在您想知道如何在实际情况下应用此方法并将数据提交到服务器。 让我来帮忙！

让我们为用户创建一个具有名称，电子邮件，照片，一些附件的表单，并且必须通过验证reCaptcha来提交表单。

最后，我们将看到如何将内容发送到服务器以使其接受文件和用户模型。

最终外观

正如您在下面的CodeSandbox.io中看到的那样，仅当验证验证码并填写我们所有必填字段时，才提交表单。 随便玩吧。

完整的例子

Formik已经免费为我们处理名称和电子邮件 。 所以我们只需要插入其他字段即可。这就像您认为的那样简单

初始值，验证模式和提交代码

为了使这些文件进入服务器，您必须通过FormData提交它们。 我采用了简单的方法，因为它仅用于演示目的，我必须对您保持简洁明了。

我建议异步/等待，但您可以使用任何您想要的！

const res = await fetch(“your post url”, { method: “POST”, body: formData });

其余的取决于您的服务器堆栈。

注意：根据您的后端堆栈，下面的代码段可能必须有所不同。

for (let i = 0; i <= values.attachments.length; i++) {

  formData.append(`attachments[${i}]`, values.attachments[i]);

}

您面临的一些挑战🎲

在这一点上，您可能想知道为什么我没有做一些基本功能，例如清除上载的文件，清除单个上载的文件（从多个上载示例中），或者什至清除并重置reCaptcha。

好吧，这就是您的挑战！ 😄

为了轻松学习这些技能，请分叉CodeSandboxes并破解！

你可以试试

• 制作更智能的Thumbnail组件（react-dropzone实际上为我们提供了预览blob，因此可以使用它吗？😄）
• 从单个上传输入中删除文件
• 从多个上传输入中删除一个（一些）文件
• 重置验证码
• 简化FormData附加代码
• 真正提交某些API

祝您编码愉快！ 🎲

From: https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc