为何无法收到formsubmit.co表单提交的文件附件？

我用Webflow搭建了一个包含文件上传的表单，提交后能正常收到通知邮件，控制台日志也显示文件已经成功发送，但收到的邮件里没有文件附件。

提交代码如下：

fetch("https://formsubmit.co/ajax/my@email.com", {
            method: "POST",
            body: formData,
            headers: {
                "Accept": "application/json"
            }
        }).then(function(response) {
            if (!response.ok) {
                throw Error(response.statusText);
            }
            return response.json(); // Parse JSON response
        }).then(function(response) {
            console.log("FormSubmit Response Data:", response); // Log the actual response data
            console.log("formData after submission: ", [...formData]); // Log formData contents
            const success = document.querySelector(".w-form-done");
            const errorElement = document.querySelector(".w-form-fail");
            success.style.display = "block";
            errorElement.style.display = "none";
            form.style.display = "none";
        }).catch(function(fetchError) {
            console.error("Error:", fetchError);
            const errorElement = document.querySelector(".w-form-fail");
            errorElement.style.display = "block";
        });
    });
});

控制台截图显示文件提交状态正常：

排查及解决步骤： #

• 检查FormSubmit后台配置
  登录FormSubmit后台，确认绑定的邮箱已完成验证，且在表单设置中开启了「允许文件附件」选项。未验证的邮箱可能会被拦截附件。

• 移除冲突的请求头
  文件上传请求依赖multipart/form-data编码，你设置的"Accept": "application/json"会干扰默认的请求格式。直接去掉headers配置，让浏览器自动生成正确的请求头：

  fetch("https://formsubmit.co/ajax/my@email.com", {
      method: "POST",
      body: formData
  })
  

• 验证FormData构造正确性
  确保HTML文件输入框的name属性正确设置（比如name="attachment"），且构造FormData时包含该字段：

  <input type="file" name="attachment" id="file-upload">
  

  构造代码可以直接用表单元素初始化：

  const formData = new FormData(document.getElementById("your-form-id"));
  

• 检查文件规格
  FormSubmit限制单文件大小不超过5MB，仅支持常见格式（PDF、DOC、JPG等）。超出规格的文件会被后台自动丢弃，不会出现在邮件中。

• 排查邮箱垃圾文件夹
  部分邮件服务商会把带附件的自动通知归类到垃圾邮件，先去垃圾邮件目录确认是否存在目标邮件。

内容的提问来源于stack exchange，提问作者Amelia Elverson