React中使用fetch发送FormData时后端收到空对象是什么原因？

• fetch API的请求体配置字段为body，你代码中使用的data是jQuery ajax的专属配置项，fetch不会识别该字段，导致最终提交的请求体为空。
• 代码中的processData: false、contentType: false也是jQuery ajax的专属参数，fetch不需要这两个配置，当你传入的body是FormData实例时，fetch会自动处理数据序列化，并且自动设置携带boundary标识的正确Content-Type请求头，手动设置反而会导致请求格式错误。
• 直接console.log(formDataToSend)输出为空对象属于正常现象，FormData是特殊的内置对象，无法直接通过普通log打印内部字段，你可以通过formDataToSend.get('email')、formDataToSend.get('file')或者遍历FormData实例来校验字段是否正确添加。

const doc = new jsPDF();
const blob = doc.output('blob');
const email = formData.emailRequired;

const formDataToSend = new FormData();
formDataToSend.append('email', email);
formDataToSend.append('file', blob);

// 校验FormData内容示例，不需要可以删除
console.log('email字段值：', formDataToSend.get('email'));
console.log('file字段值：', formDataToSend.get('file'));

fetch('http://localhost:8080/api/contract',
    {
      method: 'POST',
      body: formDataToSend
    }
);

如果修改后仍有问题，可以按以下步骤排查：

• 确认formData.emailRequired取值正常，没有出现React异步状态更新导致的取值为空问题
• 打开浏览器控制台的网络面板，查看请求的Request Payload部分是否正常携带form-data格式的字段内容

内容的提问来源于stack exchange，提问作者Katharina Schreiber