Jak mogę przekonwertować mój obiekt JS na FormData
?
Powodem, dla którego chcę to zrobić, jest to, że mam obiekt, który utworzyłem z ~ 100 wartości pól formularza.
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
Teraz jestem proszony o dodanie funkcji przesyłania plików do mojego formularza, co oczywiście jest niemożliwe przez JSON, więc planuję przejść do FormData
. Czy jest więc jakiś sposób, w jaki mogę przekonwertować mój obiekt JS na FormData
?
javascript
jquery
multipartform-data
form-data
Kamran Ahmed
źródło
źródło
FormData
przedmiot.Odpowiedzi:
Jeśli masz obiekt, możesz łatwo utworzyć obiekt FormData i dołączyć nazwy i wartości z tego obiektu do formData.
Nie opublikowałeś żadnego kodu, więc jest to ogólny przykład;
Więcej przykładów znajduje się w dokumentacji dotyczącej MDN
źródło
item
to zwykły obiekt stworzony przez OP, więc nie powinien mieć żadnych właściwości, które nie są jego własnością, chyba że ktoś popełnił błąd prototypowania czegoś na konstruktorze Object, w takim przypadku byłbyś w świecie kłopotów i nie jest to coś, przed czym powinniśmy się chronić.Object.keys
nie jest odpowiedzią, ponieważ nie powinieneś mieć kluczy jako tablicy, a następnie iteruj po kluczach, aby uzyskać wartości, powinieneś używaćfor..in
pętli.Object.keys
lubhasOwnProperty()
ponieważ obiekt jest umieszczony w pytaniu i nie powinien potrzebować żadnego z nich. Powodem, dla którego czasami widziszhasOwnProperty
używane we wtyczkach itp., Jest to, że nigdy nie wiesz, co niektórzy ludzie mogą zrobić zObject
konstruktorem, ale w większości ludzie nie powinni być zmuszeni do testowania dziedziczonych właściwości obiektów, które utworzyli, to znak, że prawdopodobnie robisz coś złego.Dzięki ES6 i bardziej funkcjonalnemu podejściu do programowania odpowiedź @ adeneo mogłaby wyglądać następująco:
Alternatywnie używając
.reduce()
i funkcji strzałek:źródło
Ta funkcja dodaje wszystkie dane z obiektu do FormData
Wersja ES6 od @ developer033:
Wersja jQuery:
źródło
&& !(data instanceof Blob)
w moim przypadku, aby przesłać moje zdjęcia&& !(Array.isArray(data) && !data.length)
warunek "if", inaczej pusta tablica zostanie usunięta.Pozostałe odpowiedzi były dla mnie niepełne. Zacząłem od odpowiedzi @Vladimira Novopashina i zmodyfikowałem ją. Oto rzeczy, których potrzebowałem i znalazłem błąd:
.prop
zamiast[prop]
. Na przykładformData.append('photos[0][file]', file)
nie działał w Google Chrome, podczas gdyformData.append('photos[0].file', file)
działałPoniższy kod powinien działać na IE11 i wiecznie zielonych przeglądarkach.
źródło
formData.append(root, data)
, nie oznacza to, że jest dodana do katalogu głównego.Wypróbuj funkcję JSON.stringify, jak poniżej
źródło
Miałem scenariusz, w którym zagnieżdżone JSON musiało być serializowane w sposób liniowy podczas konstruowania danych formularza, ponieważ w ten sposób serwer oczekuje wartości. Więc napisałem małą funkcję rekurencyjną, która tłumaczy JSON, który wygląda tak:
W coś takiego:
Serwer akceptuje dane formularzy w tym przekonwertowanym formacie.
Oto funkcja:
Wezwanie:
Używam testJSON tylko po to, aby zobaczyć przekonwertowane wyniki, ponieważ nie byłbym w stanie wyodrębnić zawartości form_data. Połączenie pocztowe AJAX:
źródło
Przepraszam za spóźnioną odpowiedź, ale walczyłem z tym, ponieważ Angular 2 obecnie nie obsługuje przesyłania plików. Więc sposobem na to było wysłanie
XMLHttpRequest
zFormData
. Stworzyłem więc funkcję, która to robi. Używam Typescript . Aby przekonwertować go na JavaScript, po prostu usuń deklarację typów danych.źródło
[]
dla właściwości obiektu wewnątrz tablicy numerycznej, aby pozostać nienaruszonymWersja TypeScript:
https://gist.github.com/Mds92/091828ea857cc556db2ca0f991fee9f6
źródło
namespace
jest kluczowe w zarezerwowanymTypeScript
( typescriptlang.org/docs/handbook/namespaces.html i github.com/Microsoft/TypeScript/issues/... ). Wydaje się również, że zapomniałeś sobie z tym poradzićFile
od ostatniejelse
woliappend
"[object File]"
doformData
.Możesz po prostu zainstalować
qs
:Po prostu zaimportuj:
Przekaż obiekt
qs.stringify()
:źródło
Rekurencyjnie
źródło
Ta metoda konwertuje obiekt JS na FormData:
źródło
Object.entries(value).forEach((v, k) => acc.append(`${key}[${v[0]}]`, v[1]));
W moim przypadku mój obiekt miał również właściwość, która była tablicą plików. Ponieważ są binarne, powinny być traktowane inaczej - indeks nie musi być częścią klucza. Więc zmodyfikowałem odpowiedź @Vladimira Novopashina i @ developer033:
źródło
Użyłem tego do przesyłania moich danych obiektu jako danych formularza.
źródło
Może szukasz tego, kodu, który otrzyma Twój obiekt javascript, utwórz z niego obiekt FormData , a następnie POST na swój serwer za pomocą nowego Fetch API :
źródło
Odwołuję się do tego z odpowiedzi Gudradaina . Trochę go edytuję w formacie Typescript.
źródło
Mogę się trochę spóźnić na imprezę, ale to właśnie stworzyłem, aby przekonwertować pojedynczy obiekt na FormData.
Jak to działa? Przekonwertuje i zwróci wszystkie oczekiwane właściwości obiektów File, które ustawiłeś na liście ignorowanych (drugi argument. Gdyby ktoś mógł mi powiedzieć lepszy sposób określenia tego, który by pomógł!) Do łańcucha json za pomocą
JSON.stringify
. Następnie na swoim serwerze wystarczy przekonwertować go z powrotem na obiekt JSON.Przykład:
Wciąż nie mam doświadczenia z żądaniami HTTP i JavaScriptem, więc wszelkie opinie będą bardzo mile widziane!
źródło
Wypróbuj obj2fd => https://www.npmjs.com/package/obj2fd
źródło