我怎样才能将我的JS对象转换为FormData?
我这样做的原因是，我有一个用~100个表单字段值构造的对象。
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
现在我被要求将上传文件功能添加到我的表单，当然，通过JSON是不可能的，所以我计划移动到FormData。那么有什么方法可以将我的JS对象转换为FormData呢?
当前回答
我参考了古德拉丹的回答。我用Typescript格式编辑了一下。
class UtilityService {
private appendFormData(formData, data, rootName) {
let root = rootName || '';
if (data instanceof File) {
formData.append(root, data);
} else if (Array.isArray(data)) {
for (var i = 0; i < data.length; i++) {
this.appendFormData(formData, data[i], root + '[' + i + ']');
}
} else if (typeof data === 'object' && data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
if (root === '') {
this.appendFormData(formData, data[key], key);
} else {
this.appendFormData(formData, data[key], root + '.' + key);
}
}
}
} else {
if (data !== null && typeof data !== 'undefined') {
formData.append(root, data);
}
}
}
getFormDataFromObj(data) {
var formData = new FormData();
this.appendFormData(formData, data, '');
return formData;
}
}
export let UtilityMan = new UtilityService();
其他回答
我参考了古德拉丹的回答。我用Typescript格式编辑了一下。
class UtilityService {
private appendFormData(formData, data, rootName) {
let root = rootName || '';
if (data instanceof File) {
formData.append(root, data);
} else if (Array.isArray(data)) {
for (var i = 0; i < data.length; i++) {
this.appendFormData(formData, data[i], root + '[' + i + ']');
}
} else if (typeof data === 'object' && data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
if (root === '') {
this.appendFormData(formData, data[key], key);
} else {
this.appendFormData(formData, data[key], root + '.' + key);
}
}
}
} else {
if (data !== null && typeof data !== 'undefined') {
formData.append(root, data);
}
}
}
getFormDataFromObj(data) {
var formData = new FormData();
this.appendFormData(formData, data, '');
return formData;
}
}
export let UtilityMan = new UtilityService();
很简单，可以这样做:
var item: { some1: "ajbd" , some2: "dds".. }
let myFormData = new FormData();
const abc = item.some1;
const xyz = item.some2;
myFormData.append('field1', abc);
myFormData.append('field2', xyz);
fetch('http:url', {
method: 'POST',
headers: {
'Content-Type': false,
},
body: myFormData,
}).
do promise ..
如果您有一个对象，您可以轻松地创建一个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的文档中有更多的例子
在我的例子中，我的对象也有属性，即文件数组。因为它们是二进制的，所以应该以不同的方式处理——索引不需要是键的一部分。所以我修改了@Vladimir Novopashin和@developer033的答案:
export function convertToFormData(data, formData, parentKey) {
if(data === null || data === undefined) return null;
formData = formData || new FormData();
if (typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
Object.keys(data).forEach(key =>
convertToFormData(data[key], formData, (!parentKey ? key : (data[key] instanceof File ? parentKey : `${parentKey}[${key}]`)))
);
} else {
formData.append(parentKey, data);
}
return formData;
}
我使用这个Post我的对象数据作为表单数据。
const encodeData = require('querystring');
const object = {type: 'Authorization', username: 'test', password: '123456'};
console.log(object);
console.log(encodeData.stringify(object));
