반응형
JS 개체를 폼 데이터로 변환
를 JS로 해야 요?FormData
이 작업을 하는 이유는 100개까지의 폼 필드 값으로 작성한 객체가 있기 때문입니다.
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
는 물론 저는 제 to 할 예정입니다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() arrow-time arrow-time: arrow-time:
const 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);
JSON.stringify 함수를 다음과 같이 시도합니다.
var postData = JSON.stringify(item);
var formData = new FormData();
formData.append("postData",postData );
다른 답변들은 나에게 불완전했다.@Vladimir Novopashin answer부터 시작해서 수정했습니다.다음은 제가 필요로 했던 것들과 버그를 다음에 나타냅니다.
- 파일 지원
- 어레이 지원
- 의 파일에는 과 같이 .
.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);
testJ를 사용하고 있습니다.SON은 변환된 결과를 보기 위해서만 form_data의 내용을 추출할 수 없기 때문입니다.AJAX 포스트 콜:
$.ajax({
type: "POST",
url: somePostURL,
data: form_data,
processData : false,
contentType : false,
success: function (data) {
},
error: function (e) {
}
});
function toFormData(o) {
return Object.entries(o).reduce((d,e) => (d.append(...e),d), new FormData())
}
var object = {
username: 'JohnDoe',
file: new File(['foo'], 'foo.txt', {type: 'text/plain'})
}
fetch('https://httpbin.org/post', {
method: 'POST',
body: toFormData(object)
}).then(r => r.json()).then(console.log)다음과 같이 간단하게 할 수 있습니다.
formData.append('item', JSON.stringify(item));
이 솔루션은 다음과 같이 짧고 달콤한 방법으로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
답변이 늦어서 죄송합니다만, Angular 2는 현재 파일 업로드를 지원하지 않기 때문에 어려움을 겪고 있었습니다.그래서, 그 방법으로는, 한 통의XMLHttpRequestFormData그래서 기능을 만들었습니다.타이프 스크립트를 사용하고 있습니다.Javascript로 변환하려면 data type 선언을 삭제하기만 하면 됩니다.
/**
* 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);
}
}
재귀적으로
const toFormData = (f => f(f))(h => f => f(x => h(h)(f)(x)))(f => fd => pk => d => {
if (d instanceof Object) {
Object.keys(d).forEach(k => {
const v = d[k]
if (pk) k = `${pk}[${k}]`
if (v instanceof Object && !(v instanceof Date) && !(v instanceof File)) {
return f(fd)(k)(v)
} else {
fd.append(k, v)
}
})
}
return fd
})(new FormData())()
let data = {
name: 'John',
age: 30,
colors: ['red', 'green', 'blue'],
children: [
{ name: 'Max', age: 3 },
{ name: 'Madonna', age: 10 }
]
}
console.log('data', data)
document.getElementById("data").insertAdjacentHTML('beforeend', JSON.stringify(data))
let formData = toFormData(data)
for (let key of formData.keys()) {
console.log(key, formData.getAll(key).join(','))
document.getElementById("item").insertAdjacentHTML('beforeend', `<li>${key} = ${formData.getAll(key).join(',')}</li>`)
}<p id="data"></p>
<ul id="item"></ul>중첩된 개체 및 파일
다음 솔루션은 중첩된 개체, 배열 및 파일을 처리합니다.
const buildFormData = (formData: FormData, data: FormVal, parentKey?: string) => {
if (Array.isArray(data)) {
data.forEach((el) => {
buildFormData(formData, el, parentKey)
})
} else if (typeof data === "object" && !(data instanceof File)) {
Object.keys(data).forEach((key) => {
buildFormData(formData, (data as FormDataNest)[key], parentKey ? `${parentKey}.${key}` : key)
})
} else {
if (isNil(data)) {
return
}
let value = typeof data === "boolean" || typeof data === "number" ? data.toString() : data
formData.append(parentKey as string, value)
}
}
export const getFormData = (data: Record<string, FormDataNest>) => {
const formData = new FormData()
buildFormData(formData, data)
return formData
}
종류들
type FormDataPrimitive = string | Blob | number | boolean
interface FormDataNest {
[x: string]: FormVal
}
type FormVal = FormDataNest | FormDataPrimitive
제 경우 오브젝트도 파일 배열의 속성을 가지고 있었습니다.2진수이므로 다르게 처리해야 합니다. 인덱스가 키의 일부가 될 필요는 없습니다.그래서 @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;
}
javascript 객체를 수신하여 FormData 객체를 작성한 후 새로운 Fetch API를 사용하여 서버에 POST하는 코드입니다.
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);
});
파티에 조금 늦을 수도 있지만, 이것은 하나의 개체를 FormData로 변환하기 위해 만든 것입니다.
function formData(formData, filesIgnore = []) {
let data = new FormData();
let files = filesIgnore;
Object.entries(formData).forEach(([key, value]) => {
if (typeof value === 'object' && !files.includes(key)) {
data.append(key, JSON.stringify(value) || null);
} else if (files.includes(key)) {
data.append(key, value[0] || null);
} else {
data.append(key, value || null);
}
})
return data;
}
떻게게작?작 동?? 목록argument.ignore)에서됩니다.알 수 더 방법이 도움이 될 를 수 있습니다.JSON.stringify그런 다음 서버에서 다시 JSON 개체로 변환하면 됩니다.
예:
let form = {
first_name: 'John',
last_name: 'Doe',
details: {
phone_number: 1234 5678 910,
address: '123 Some Street',
},
profile_picture: [object FileList] // set by your form file input. Currently only support 1 file per property.
}
function submit() {
let data = formData(form, ['profile_picture']);
axios.post('/url', data).then(res => {
console.log('object uploaded');
})
}
저는 아직 Http 요청과 JavaScript를 잘 모르기 때문에 어떤 피드백이라도 매우 감사합니다!
이 메서드는 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());
}는 간단하게 할 수 있습니다.qs:
npm i qs
간단한 Import:
import qs from 'qs'
를 「」에 .qs.stringify():
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
qs.stringify(item)
오브젝트 데이터를 폼 데이터로 게시할 때 사용했습니다.
const encodeData = require('querystring');
const object = {type: 'Authorization', username: 'test', password: '123456'};
console.log(object);
console.log(encodeData.stringify(object));
나는 Gudradain의 대답에서 이것을 인용한다.나는 그것을 타이프스크립트 형식으로 조금 편집한다.
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파일을 업로드 할 수 있도록 하기 위해서는 3가지 방법이 있습니다.자세한 내용은 이 답변에서 설명하겠습니다.
1. 폼에서 직접 데이터를 가져옵니다.
, , , , , , , , , , , , , , , , , , , , , , ,가 있어야합니다.name 및value에 DOMFormData DOM 합니다.
let formData = new FormData(data.target as HTMLFormElement)
- 장점:
- 값을 얻기 위해 JS 솔루션을 사용할 필요가 없습니다.
- 네스트된 데이터, 어레이 등에 대한 네이티브 지원...
- 단점:
- 필요한 모든 데이터가 입력 DOM의 값 속성으로 추가되었는지 확인해야 합니다.
2. JS에 의한 데이터 변환
변수에 저장된 값이 있는 경우 값을 에 추가할 수 있습니다.FormDataJS를 사용합니다.
- 장점:
- 필요에 따라 조작할 수 있다
- 입력 DOM에 값 속성이 있을 필요는 없습니다.
- 단점:
- 사용자 지정 복합 JS를 사용하여 중첩된 데이터를
FormData물건 - 변수에 값을 저장해야 합니다.
3. 별도의 요청으로 파일 업로드
파일 업로드 입력을 위한 별도의 양식을 만들 수 있습니다.
- 장점:
- 업로드가 전송될 때까지 기다릴 필요가 없습니다.
- 모든 데이터를 추가하는데 대해 걱정할 필요가 없습니다.
FormDataobject, 파일만 추가합니다.
- 단점:
- 엔티티 자체를 작성하기 전에 백엔드에서 이러한 업로드를 처리해야 합니다.
- 프런트 엔드 및 백 엔드 양쪽에서 파일 삭제를 처리해야 합니다.
jquery를 사용하면 다음과 같이 간단하게 할 수 있습니다.$.param(obj) .
예:
const obj = {
description: 'Some Item',
price: '0.00',
srate: '0.00',
color: 'red'
}
const form_obj = $.param(obj);
$.ajax({
url:"example.com",
method:"POST",
data:form_obj
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>obj2http = > 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
반응형
'source' 카테고리의 다른 글
| 오브젝트 길이를 얻는 방법 (0) | 2022.09.22 |
|---|---|
| JavaScript가 멀티스레딩을 지원하지 않는 이유는 무엇입니까? (0) | 2022.09.22 |
| 오류 발생 시 python 디버거를 자동으로 시작하는 중 (0) | 2022.09.22 |
| MySQL 행 형식:고정과 동적의 차이점 (0) | 2022.09.22 |
| java.util을 변환하고 있습니다.해시맵 속성 (0) | 2022.09.22 |