在 javascript 中，web worker 无法直接接收 htmlformelement 实例或 formdata 对象，因为 formdata 包含的文件引用和内部状态无法被序列化。正确的做法是调用 worker.postmessage() 时传入一个独立的 formdata 实例，浏览器会自动将其序列化为 multipart/form-data 格式并传输到 worker 线程中。
Worker 端如何解析收到的 FormData
当主线程发送 FormData 后，Worker 的 onmessage 事件处理函数会接收到一个结构化的数据对象。在这个对象中，原始的表单字段会被转换为键值对数组，而文件字段则会被转换为 Blob 对象。开发者需要遍历这个对象，根据值的类型（字符串或 Blob）来重新组装或直接使用这些数据。
// worker.js
self.onmessage = function(e) {
const formData = e.data;
// 遍历所有字段
for (const [key, value] of Object.entries(formData)) {
if (value instanceof Blob) {
console.log(`File: ${key}, size: ${value.size}`);
} else {
console.log(`Field: ${key}, value: ${value}`);
}
}
};
主线程发送带文件的 FormData 示例
为了验证这一过程，我们需要在主线程中创建一个包含文本字段和文件字段的 FormData 对象，并将其发送给 Worker。通过控制台日志可以观察到，Worker 接收到的数据结构中，文件部分已经变成了 Blob 类型，这证实了二进制数据的正确传递。
立即学习“Java免费学习笔记（深入）”；
// main.js
const worker = new Worker('worker.js');
const form = new FormData();
form.append('username', 'developer');
form.append('avatar', fileInput.files[0]);
worker.postMessage(form);
// Worker 收到:
// { username: 'developer', avatar: Blob {...} }
基于 postMessage 传输机制的具体问题
在使用 postMessage 传递 FormData 时，必须注意其底层使用的是结构化克隆算法（Structured Clone Algorithm）。这意味着只有支持该算法的数据类型才能被成功传输。对于 FormData 而言，它会被展开为一个普通的 JavaScript 对象，其中每个键对应表单中的 name 属性，每个值对应 value。如果表单中有同名字段，它们通常会被合并为数组或仅保留最后一个值，具体取决于浏览器的实现细节。此外，由于传输的是数据的副本而非引用，任何在 Worker 中对接收到的数据进行修改都不会影响主线程中的原始 FormData 对象。
