我怎样才能将我的JS对象转换为FormData?
我这样做的原因是，我有一个用~100个表单字段值构造的对象。
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
现在我被要求将上传文件功能添加到我的表单，当然，通过JSON是不可能的，所以我计划移动到FormData。那么有什么方法可以将我的JS对象转换为FormData呢?
当前回答
你可以简单地安装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();
使用jquery，你可以通过$.param(obj)简单地做到这一点。
例子: Const obj = { 描述:'Some Item'， 价格:0.00, srate:“0.00”, 颜色:红色的 ｝ Const form_obj = $.param(obj); . ajax({美元 url:“example.com”, 方法:“文章”, 数据:form_obj }) < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本>
尝试JSON。函数如下所示
var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );
函数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)
如果您有一个对象，您可以轻松地创建一个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的文档中有更多的例子
