JS 개체를 양식 데이터로 변환
내 JS 개체를 FormData
어떻게 변환 할 수 있습니까?
이 작업을 수행하려는 이유는 ~ 100 개의 양식 필드 값으로 구성한 개체가 있기 때문입니다.
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
이제 JSON을 통해 당연히 불가능한 업로드 파일 기능을 양식에 추가하라는 요청을 받았으므로 FormData
. 그래서 내 JS 개체를 변환 할 수있는 방법이 FormData
있습니까?
개체가있는 경우 쉽게 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 문서에 더 많은 예제가 있습니다.
ES6와 더 기능적인 프로그래밍 접근 방식을 사용하면 @adeneo의 대답은 다음과 같습니다.
function getFormData(object) {
const formData = new FormData();
Object.keys(object).forEach(key => formData.append(key, object[key]));
return formData;
}
그리고 또는 .reduce()
화살표 기능을 사용 :
getFormData = object => Object.keys(object).reduce((formData, key) => {
formData.append(key, object[key]);
return formData;
}, new FormData());
이 함수는 개체의 모든 데이터를 FormData에 추가합니다.
@ developer033의 ES6 버전 :
function buildFormData(formData, data, parentKey) {
if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
Object.keys(data).forEach(key => {
buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
});
} else {
const value = data == null ? '' : data;
formData.append(parentKey, value);
}
}
function jsonToFormData(data) {
const formData = new FormData();
buildFormData(formData, data);
return formData;
}
const my_data = {
num: 1,
falseBool: false,
trueBool: true,
empty: '',
und: undefined,
nullable: null,
date: new Date(),
name: 'str',
another_object: {
name: 'my_name',
value: 'whatever'
},
array: [
{
key1: {
name: 'key1'
}
}
]
};
jsonToFormData(my_data)
jQuery 버전 :
function appendFormdata(FormData, data, name){
name = name || '';
if (typeof data === 'object'){
$.each(data, function(index, value){
if (name == ''){
appendFormdata(FormData, value, index);
} else {
appendFormdata(FormData, value, name + '['+index+']');
}
})
} else {
FormData.append(name, data);
}
}
var formData = new FormData(),
your_object = {
name: 'test object',
another_object: {
name: 'and other objects',
value: 'whatever'
}
};
appendFormdata(formData, your_object);
다른 답변은 불완전했습니다. @Vladimir Novopashin 답변에서 시작하여 수정했습니다. 내가 필요로하고 발견 한 버그는 다음과 같습니다.
- 파일 지원
- 어레이 지원
- 버그 : 복잡한 객체 내부의 파일
.prop
은[prop]
. 예를 들어,formData.append('photos[0][file]', file)
동안, 구글 크롬에서 작동하지 않았다formData.append('photos[0].file', file)
일 - 내 개체의 일부 속성 무시
다음 코드는 IE11 및 에버그린 브라우저에서 작동합니다.
function objectToFormData(obj, rootName, ignoreList) {
var formData = new FormData();
function appendFormData(data, root) {
if (!ignore(root)) {
root = root || '';
if (data instanceof File) {
formData.append(root, data);
} else if (Array.isArray(data)) {
for (var i = 0; i < data.length; i++) {
appendFormData(data[i], root + '[' + i + ']');
}
} else if (typeof data === 'object' && data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
if (root === '') {
appendFormData(data[key], key);
} else {
appendFormData(data[key], root + '.' + key);
}
}
}
} else {
if (data !== null && typeof data !== 'undefined') {
formData.append(root, data);
}
}
}
}
function ignore(root){
return Array.isArray(ignoreList)
&& ignoreList.some(function(x) { return x === root; });
}
appendFormData(obj, rootName);
return formData;
}
서버가 값을 기대하는 방식이기 때문에 양식 데이터가 구성되는 동안 중첩 된 JSON을 선형 방식으로 직렬화해야하는 시나리오가있었습니다. 그래서 다음과 같은 JSON을 번역하는 작은 재귀 함수를 작성했습니다.
{
"orderPrice":"11",
"cardNumber":"************1234",
"id":"8796191359018",
"accountHolderName":"Raj Pawan",
"expiryMonth":"02",
"expiryYear":"2019",
"issueNumber":null,
"billingAddress":{
"city":"Wonderland",
"code":"8796682911767",
"firstname":"Raj Pawan",
"lastname":"Gumdal",
"line1":"Addr Line 1",
"line2":null,
"state":"US-AS",
"region":{
"isocode":"US-AS"
},
"zip":"76767-6776"
}
}
다음과 같이 :
{
"orderPrice":"11",
"cardNumber":"************1234",
"id":"8796191359018",
"accountHolderName":"Raj Pawan",
"expiryMonth":"02",
"expiryYear":"2019",
"issueNumber":null,
"billingAddress.city":"Wonderland",
"billingAddress.code":"8796682911767",
"billingAddress.firstname":"Raj Pawan",
"billingAddress.lastname":"Gumdal",
"billingAddress.line1":"Addr Line 1",
"billingAddress.line2":null,
"billingAddress.state":"US-AS",
"billingAddress.region.isocode":"US-AS",
"billingAddress.zip":"76767-6776"
}
서버는이 변환 된 형식의 양식 데이터를 허용합니다.
기능은 다음과 같습니다.
function jsonToFormData (inJSON, inTestJSON, inFormData, parentKey) {
// http://stackoverflow.com/a/22783314/260665
// Raj: Converts any nested JSON to formData.
var form_data = inFormData || new FormData();
var testJSON = inTestJSON || {};
for ( var key in inJSON ) {
// 1. If it is a recursion, then key has to be constructed like "parent.child" where parent JSON contains a child JSON
// 2. Perform append data only if the value for key is not a JSON, recurse otherwise!
var constructedKey = key;
if (parentKey) {
constructedKey = parentKey + "." + key;
}
var value = inJSON[key];
if (value && value.constructor === {}.constructor) {
// This is a JSON, we now need to recurse!
jsonToFormData (value, testJSON, form_data, constructedKey);
} else {
form_data.append(constructedKey, inJSON[key]);
testJSON[constructedKey] = inJSON[key];
}
}
return form_data;
}
기도:
var testJSON = {};
var form_data = jsonToFormData (jsonForPost, testJSON);
form_data의 내용을 추출 할 수 없기 때문에 변환 된 결과를보기 위해 testJSON을 사용하고 있습니다. AJAX 포스트 콜 :
$.ajax({
type: "POST",
url: somePostURL,
data: form_data,
processData : false,
contentType : false,
success: function (data) {
},
error: function (e) {
}
});
아래와 같이 JSON.stringify 기능을 사용해보십시오
var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );
늦은 답변으로 죄송하지만 Angular 2는 현재 파일 업로드를 지원하지 않기 때문에 어려움을 겪고 있습니다. 그래서 그것을하는 방법 XMLHttpRequest
은 FormData
. 그래서 그것을하기위한 함수를 만들었습니다. Typescript를 사용하고 있습니다. 그것을 Javascript 로 변환하려면 데이터 유형 선언을 제거하십시오.
/**
* Transforms the json data into form data.
*
* Example:
*
* Input:
*
* fd = new FormData();
* dob = {
* name: 'phone',
* photos: ['myphoto.jpg', 'myotherphoto.png'],
* price: '615.99',
* color: {
* front: 'red',
* back: 'blue'
* },
* buttons: ['power', 'volup', 'voldown'],
* cameras: [{
* name: 'front',
* res: '5Mpx'
* },{
* name: 'back',
* res: '10Mpx'
* }]
* };
* Say we want to replace 'myotherphoto.png'. We'll have this 'fob'.
* fob = {
* photos: [null, <File object>]
* };
* Say we want to wrap the object (Rails way):
* p = 'product';
*
* Output:
*
* 'fd' object updated. Now it will have these key-values "<key>, <value>":
*
* product[name], phone
* product[photos][], myphoto.jpg
* product[photos][], <File object>
* product[color][front], red
* product[color][back], blue
* product[buttons][], power
* product[buttons][], volup
* product[buttons][], voldown
* product[cameras][][name], front
* product[cameras][][res], 5Mpx
* product[cameras][][name], back
* product[cameras][][res], 10Mpx
*
* @param {FormData} fd FormData object where items will be appended to.
* @param {Object} dob Data object where items will be read from.
* @param {Object = null} fob File object where items will override dob's.
* @param {string = ''} p Prefix. Useful for wrapping objects and necessary for internal use (as this is a recursive method).
*/
append(fd: FormData, dob: Object, fob: Object = null, p: string = ''){
let apnd = this.append;
function isObj(dob, fob, p){
if(typeof dob == "object"){
if(!!dob && dob.constructor === Array){
p += '[]';
for(let i = 0; i < dob.length; i++){
let aux_fob = !!fob ? fob[i] : fob;
isObj(dob[i], aux_fob, p);
}
} else {
apnd(fd, dob, fob, p);
}
} else {
let value = !!fob ? fob : dob;
fd.append(p, value);
}
}
for(let prop in dob){
let aux_p = p == '' ? prop : `${p}[${prop}]`;
let aux_fob = !!fob ? fob[prop] : fob;
isObj(dob[prop], aux_fob, aux_p);
}
}
TypeScript 버전 :
static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
let formData = form || new FormData();
for (let propertyName in model) {
if (!model.hasOwnProperty(propertyName) || model[propertyName] == undefined) continue;
let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
if (model[propertyName] instanceof Date) {
formData.append(formKey, this.dateTimeToString(model[propertyName]));
}
else if (model[propertyName] instanceof Array) {
model[propertyName].forEach((element, index) => {
if (typeof element != 'object')
formData.append(`${formKey}[]`, element);
else {
const tempFormKey = `${formKey}[${index}]`;
this.convertModelToFormData(element, formData, tempFormKey);
}
});
}
else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File)) {
this.convertModelToFormData(model[propertyName], formData, formKey);
}
else {
formData.append(formKey, model[propertyName].toString());
}
}
return formData;
}
https://gist.github.com/Mds92/091828ea857cc556db2ca0f991fee9f6
간단히 설치할 수 있습니다 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)
이 메소드는 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());
}
In my case my object also had property which was array of files. Since they are binary they should be dealt differently - index doesn't need to be part of the key. So i modified @Vladimir Novopashin's and @developer033's answer:
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;
}
Try obj2fd => https://www.npmjs.com/package/obj2fd
import obj2fd from 'obj2fd'
let data = {a:1, b:2, c:{ca:1}};
let dataWithFormData = obj2fd(data);
//result => [a=>1, b=>2, c=>[ca=>1]]
참고URL : https://stackoverflow.com/questions/22783108/convert-js-object-to-form-data
'Programing' 카테고리의 다른 글
Ruby on Rails에서 두 날짜 사이의 개월 수 찾기 (0) | 2020.09.06 |
---|---|
Java에서 이름으로 클래스를 인스턴스화하는 방법이 있습니까? (0) | 2020.09.06 |
Python을 사용하여 CSV 파일을 sqlite3 데이터베이스 테이블로 가져 오기 (0) | 2020.09.06 |
애니메이션없이 xcode에서 segue 푸시 (0) | 2020.09.06 |
파일을 Base64String으로 변환하고 다시 다시 변환 (0) | 2020.09.06 |