将 JS 对象转换为表单数据

javascript jquery multipartform-data form-data

2022-08-30 00:52:50

如何将我的JS对象转换为？FormData

我想这样做的原因是，我有一个对象，我从~100个表单字段值中构造出来。

var item = {
   description: 'Some Item',
   price : '0.00',
   srate : '0.00',
   color : 'red',
   ...
   ...
}

现在我被要求将上传文件功能添加到我的表单中，这当然不可能通过JSON实现，因此我计划移动到.那么有什么方法可以将我的JS对象转换为？FormDataFormData

答案 1

如果您有一个对象，则可以轻松地创建一个 FormData 对象，并将该对象中的名称和值追加到 formData。

您没有发布任何代码，因此这是一个一般示例;

var form_data = new FormData();

for ( var key in item ) {
    form_data.append(key, item[key]);
}

$.ajax({
    url         : 'http://example.com/upload.php',
    data        : form_data,
    processData : false,
    contentType : false,
    type: 'POST'
}).done(function(data){
    // do stuff
});

MDN文档中还有更多示例

答案 2

使用ES6和更函数式的编程方法@adeneo的答案可能如下所示：

function getFormData(object) {
    const formData = new FormData();
    Object.keys(object).forEach(key => formData.append(key, object[key]));
    return formData;
}

或者使用和箭头函数：.reduce()

const getFormData = object => Object.keys(object).reduce((formData, key) => {
    formData.append(key, object[key]);
    return formData;
}, new FormData());