我怎样才能将我的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对象，您只追加文件。
缺点:
在创建实体本身之前，您需要在后端处理这些上传 您需要在前端和后端处理删除文件
其他回答
这个方法将一个JS对象转换为一个FormData:
function convertToFormData(params) { return Object.entries(params) .reduce((acc, [key, value]) => { if (Array.isArray(value)) { value.forEach((v, k) => acc.append(`${key}[${k}]`, value)); } else if (typeof value === 'object' && !(value instanceof File) && !(value instanceof Date)) { Object.entries(value).forEach((v, k) => acc.append(`${key}[${k}]`, value)); } else { acc.append(key, value); } return acc; }, new FormData()); }
尝试JSON。函数如下所示
var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );
也许你正在寻找这个，一个代码，接收你的javascript对象，从它创建一个FormData对象，然后POST它到你的服务器使用新的Fetch API:
let myJsObj = {'someIndex': 'a value'};
let datos = new FormData();
for (let i in myJsObj){
datos.append( i, myJsObj[i] );
}
fetch('your.php', {
method: 'POST',
body: datos
}).then(response => response.json())
.then(objson => {
console.log('Success:', objson);
})
.catch((error) => {
console.error('Error:', error);
});
你可以简单地安装qs:
npm i qs
简单的导入:
import qs from 'qs'
将对象传递给qs.stringify():
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
qs.stringify(item)
我参考了古德拉丹的回答。我用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();
