我怎样才能将我的JS对象转换为FormData?
我这样做的原因是，我有一个用~100个表单字段值构造的对象。
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
现在我被要求将上传文件功能添加到我的表单，当然，通过JSON是不可能的，所以我计划移动到FormData。那么有什么方法可以将我的JS对象转换为FormData呢?
当前回答
注意:这个答案并没有直接回答问题，而是给出了说明和替代方案。
人们通常使用FormData来允许他们上传文件，有三种方法可以做到这一点，我会在这个回答中详细提到它们。
1. 直接从表单中获取数据
为此，您需要在每个输入中拥有名称和值属性，然后告诉FormData从表单DOM中获取值;
let formData = new FormData(data.target as HTMLFormElement)
优点:
你不需要使用JS解决方案来获取这些值。 原生支持嵌套数据，数组等…
缺点:
您需要确保所有需要的数据都作为值属性添加到输入dom上
2. 用JS转换数据 如果你把值存储在变量中，那么你可以使用JS将它们附加到FormData中。
优点:
是否可以根据需要进行操作 你不需要在输入dom中有值属性
缺点:
自定义复杂JS附加嵌套数据到FormData对象 您需要将值存储在一个变量中
3.在单独的请求中上传文件
您可以为文件上传输入创建一个单独的表单。
优点:
您不需要等待上传提交 您不需要担心将所有数据追加到FormData对象，您只追加文件。
缺点:
在创建实体本身之前，您需要在后端处理这些上传 您需要在前端和后端处理删除文件
其他回答
下面是一个使用Object.entries()的简单而甜蜜的解决方案，它甚至可以处理嵌套对象。
// If this is the object you want to convert to FormData...
const item = {
description: 'First item',
price: 13,
photo: File
};
const formData = new FormData();
Object.entries(item).forEach(([key, value]) => {
formData.append(key, value);
});
// At this point, you can then pass formData to your handler method
阅读更多关于Object.entries()在这里- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
函数toFormData(o) { 返回Object.entries (o) .reduce ((d, e) = > (d.append e(…),d),新FormData ()) ｝ Var对象= { 用户名:“JohnDoe”, 文件:新文件(“foo”,“foo.txt”,{类型:“文本/普通”}) ｝ fetch (https://httpbin.org/post, { 方法:“文章”, 身体:toFormData(对象) })。Then (r => r.json()).then(console.log)
下面是一个非常简单的TypeScript实现，基于@Vladimir Novopashin和@developer033的回答。打印稿操场
type Serializeable =
| string
| number
| boolean
| null
| Date
| File
| { [x: string | number]: Serializeable }
| Array<Serializeable>;
function serialize(
data: Serializeable,
parentKey = '',
formData: FormData = new FormData()
): FormData {
if ( typeof data === 'string') {
formData.append(parentKey, data);
} else if ( typeof data === 'number') {
formData.append(parentKey, data.toString());
} else if ( typeof data === 'boolean') {
formData.append(parentKey, data ? 'true' : 'false');
} else if (data === null) {
formData.append(parentKey, 'null');
} else if (data instanceof Date) {
formData.append(parentKey, data.toISOString());
} else if (data instanceof File) {
formData.append(parentKey, data);
} else {
// Arrays and objects
Object.entries(data).forEach((entry: [string | number, Serializeable]) => {
const [key, value] = entry;
serialize(value, parentKey ? `${parentKey}[${key}]` : key.toString(), formData);
});
}
return formData;
}
我使用这个Post我的对象数据作为表单数据。
const encodeData = require('querystring');
const object = {type: 'Authorization', username: 'test', password: '123456'};
console.log(object);
console.log(encodeData.stringify(object));
使用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());
