为什么使用 AJAX 表单方法时，文件上传在 formsubmit.co 中不起作用？

Question

我有一个用 Gatsby 构建的静态网站，还有一个包含文件上传的联系表。因为我不想设置后端，所以我选择 FormSubmit.co 服务来处理每次提交表单时发送电子邮件。

上传文件效果很好，就在我使用方法时，我在电子邮件中收到了该文件：将端点添加到表单操作

action="https://formsubmit.co/[email protected]"

，如DOCS中所述。
但是该方法将页面重定向到另一个页面；所以因为我不希望页面被重定向并想显示我自己的消息，所以我决定使用AJAX方法。

这是我从用户那里获取名称和文件的代码，以及 handleSubmit 函数：

import React, { useRef } from 'react';

const MyForm = () => {
 const form = useRef(null);

 const handleSubmit = (e) => {
    e.preventDefault();
    const data = new FormData(form.current);

    fetch('https://formsubmit.co/ajax/[email protected]', {
      method: 'POST',
      body: data,
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.log(error));
  };

 return (
  <form ref={form} method="POST" encType="multipart/form-data" onSubmit={handleSubmit}>
    <input id="name" name="Name" />
    <input type="file" id="file" name="File" />
    <button type="submit">Send</button>
  </form>
 );
};

问题 是在使用 AJAX 表单时，文件无法上传，我的电子邮件中也没有收到。但是没有错误消息，甚至我认为文件已经发送！根据网络上的 POST 请求：

我也尝试过 Axios 库，但它也没有用。

Answer 1

使用 enctype="multipart/form-data" 而不是 encType。它会起作用的。 您可以查看此链接以获取有关如何使用 formsubmit.co 的更多信息https://formsubmit.co/documentation

Answer 2

也许 > encType="multipart/form-data" 应该被另一个参数替换？