使用new FormData(form)返回空对象及Web Workers场景问题咨询

为什么JSON.stringify(formData)返回空对象？ #

FormData 并不是普通的 JavaScript 对象，它是一种专门处理表单数据的键值对集合类型。JSON.stringify()只能序列化对象自身的可枚举属性，但 FormData 的内容并没有暴露为这类属性，所以直接序列化自然会得到空对象。

解决方案：将FormData转为可序列化的普通对象

有两种靠谱的方式实现转换：

• 方法一：用Object.fromEntries()（现代浏览器原生支持）

var myForm = document.getElementById('myForm');
const formData = new FormData(myForm);
const formObj = Object.fromEntries(formData);
alert(JSON.stringify(formObj)); // 现在能看到正确的表单键值对了

• 方法二：手动遍历FormData（兼容旧版浏览器）

var myForm = document.getElementById('myForm');
const formData = new FormData(myForm);
const formObj = {};
for (let [key, value] of formData.entries()) {
  formObj[key] = value;
}
alert(JSON.stringify(formObj));

Web Workers中使用FormData的解决方案 #

你说得没错，Web Workers 完全无法访问 DOM，所以直接把表单DOM元素传给 Worker 肯定行不通，Worker里也没法从DOM元素创建FormData。我们需要换个思路，在主线程提前处理好数据再传递：

步骤1：主线程把表单数据转为可传递格式

在主线程中，先将表单数据转成普通对象或者URLSearchParams字符串，再发送给Worker：

// 主线程代码
const myForm = document.getElementById('myForm');
const formData = new FormData(myForm);
// 方式一：转成普通对象
const formObj = Object.fromEntries(formData);
// 方式二：转成URLSearchParams字符串
const formStr = new URLSearchParams(formData).toString();

// 发送给Worker
const worker = new Worker('your-worker.js');
worker.postMessage(formObj); // 也可以发送formStr

步骤2：Worker中重新构建FormData

在Worker里接收数据后，再重新创建FormData实例：

// Worker代码
self.onmessage = function(e) {
  const formData = new FormData();
  // 如果接收的是普通对象
  const formObj = e.data;
  for (const key in formObj) {
    if (formObj.hasOwnProperty(key)) {
      formData.append(key, formObj[key]);
    }
  }

  // 如果接收的是URLSearchParams字符串，用下面这段
  // const params = new URLSearchParams(e.data);
  // const formData = new FormData();
  // params.forEach((value, key) => {
  //   formData.append(key, value);
  // });

  // 现在就能正常使用formData做后续操作了，比如提交请求
  fetch('/api/submit', {
    method: 'POST',
    body: formData
  });
};

这样既避开了Worker无法访问DOM的限制，又能正常使用FormData处理表单数据。

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