为什么文件上传表单上formik的值对象内的文件对象为空？答案

【问题标题】：Why is the file object empty inside formik's values object on file upload form?为什么文件上传表单上formik的值对象内的文件对象为空？
【发布时间】：2020-08-16 12:09:38
【问题描述】：

我正在尝试使用 formik 上传文件，但文件对象始终为空，我无法完全弄清楚。这是代码框的链接 - https://codesandbox.io/s/formik-file-input-with-validation-forked-r5jqg?file=/src/App.js

我从 github 上提交的这个问题中获得了这个实现 - https://github.com/formium/formik/issues/926。

非常感谢您的帮助。

【问题讨论】：

标签： reactjs formik

【解决方案1】：

您将 object 设置为 e.target.files[0]，而 file 最初是 undefined。您需要将e.taregt.files[0] 设置为reader.readAsDataURL(file)。也不是你的状态对象file。您需要设置名称和大小，因为这是验证架构和显示所需的。我已经评论了验证模式中支持的格式，如input type=file，您可以通过accept 键直接提及接受的格式。

这是我修改后的工作sandbox。

【讨论】：

我注意到，当我 alert formik values 对象时，文件对象是空的，但是在控制台记录它时，我确实看到了文件对象。我的问题是，当我将 formik values 对象发布到服务器时，它在 req.body 中显示为一个空对象。
你检查过我的沙盒链接了吗？它在那里工作正常。
我已经更新了我的演示。现在文件对象来了。你能检查一下这是你想要的吗？
好的，据我所知，文件没有正确发布到服务器的原因是负载不是FormData 类型。为了解决这个问题，我在 Formik 的 onSubmit 处理程序中添加了这个 - const formData = new FormData(); formData.append("photo", values.file);，然后将 formData 作为有效负载传递给 axios。最初我认为，alert 上的文件对象为空是导致问题的原因，但事实并非如此。