JavaScript 中 FormData 到普通对象的转换技巧有哪些

在前端开发中，FormData 是用于构造表单数据、发送表单请求的常用接口，但很多接口需要接收普通的 JavaScript 对象作为入参，因此掌握 FormData 到普通对象的转换技巧非常有必要。

基础转换实现

对于只包含单个值的表单字段，我们可以通过遍历 FormData 的 entries 方法来完成基础转换，具体实现代码如下：

// 创建示例 FormData
const formData = new FormData();
formData.append('name', '张三');
formData.append('age', '20');
formData.append('city', '北京');

// 基础转换函数
function formDataToObjectBasic(formData) {
    const result = {};
    // 遍历 FormData 的所有键值对
    for (const [key, value] of formData.entries()) {
        result[key] = value;
    }
    return result;
}

const basicResult = formDataToObjectBasic(formData);
console.log(basicResult); // { name: '张三', age: '20', city: '北京' }

处理多值字段的转换技巧

如果表单中存在同名的多值字段，比如复选框组，基础转换会覆盖之前的值，此时需要把同名字段处理成数组，实现代码如下：

// 创建包含多值字段的 FormData
const multiFormData = new FormData();
multiFormData.append('hobby', '篮球');
multiFormData.append('hobby', '足球');
multiFormData.append('hobby', '羽毛球');
multiFormData.append('name', '李四');

// 支持多值字段的转换函数
function formDataToObjectMulti(formData) {
    const result = {};
    for (const [key, value] of formData.entries()) {
        // 如果键已经存在，且不是数组，先转为数组
        if (result.hasOwnProperty(key)) {
            if (!Array.isArray(result[key])) {
                result[key] = [result[key]];
            }
            result[key].push(value);
        } else {
            result[key] = value;
        }
    }
    return result;
}

const multiResult = formDataToObjectMulti(multiFormData);
console.log(multiResult); // { hobby: ['篮球', '足球', '羽毛球'], name: '李四' }

使用 Object.fromEntries 简化转换

ES2019 引入了 Object.fromEntries 方法，我们可以直接用它来简化基础转换的逻辑，代码如下：

// 使用 Object.fromEntries 实现基础转换
function formDataToObjectSimple(formData) {
    return Object.fromEntries(formData.entries());
}

// 测试转换结果
const testFormData = new FormData();
testFormData.append('username', 'testUser');
testFormData.append('email', 'test@ipipp.com');

const simpleResult = formDataToObjectSimple(testFormData);
console.log(simpleResult); // { username: 'testUser', email: 'test@ipipp.com' }

转换注意事项

• FormData 中的值默认都是字符串类型，如果需要转换为其他类型，比如数字、布尔值，需要在转换后额外处理。
• 如果表单中包含文件字段，转换后的对象中文件值会是 File 对象，后续处理文件需要单独处理，不能直接当做普通字符串使用。
• 遍历 FormData 时，使用 entries 方法比 forEach 方法兼容性更好，优先选择 entries 方法遍历。

常见场景示例

在发送 POST 请求时，我们可能需要把 FormData 转换为普通对象再处理，结合 fetch 的示例如下：

// 假设页面有一个 id 为 testForm 的表单
const formElement = document.getElementById('testForm');
const formData = new FormData(formElement);

// 转换为普通对象
const dataObj = Object.fromEntries(formData.entries());

// 发送请求
fetch('http://192.168.0.1:3000/api/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(dataObj)
}).then(res => res.json())
  .then(data => console.log('请求结果:', data));

JavaScriptFormData对象转换前端数据修改时间：2026-06-21 14:18:34