Wie kann ich mein JS-Objekt in konvertieren FormData
?
Der Grund, warum ich dies tun möchte, ist, dass ich ein Objekt habe, das ich aus den ~ 100 Formularfeldwerten konstruiert habe.
var item = {
description: 'Some Item',
price : '0.00',
srate : '0.00',
color : 'red',
...
...
}
Jetzt werde ich gebeten, die Funktion zum Hochladen von Dateien zu meinem Formular hinzuzufügen, was über JSON natürlich nicht möglich ist, und daher plane ich, zu zu wechseln FormData
. Gibt es eine Möglichkeit, mein JS-Objekt zu konvertieren FormData
?
javascript
jquery
multipartform-data
form-data
Kamran Ahmed
quelle
quelle
FormData
Objekt.Antworten:
Wenn Sie ein Objekt haben, können Sie einfach ein FormData-Objekt erstellen und die Namen und Werte dieses Objekts an formData anhängen.
Sie haben keinen Code veröffentlicht, daher handelt es sich um ein allgemeines Beispiel.
Weitere Beispiele finden Sie in der Dokumentation zu MDN
quelle
item
ist ein reguläres Objekt, das vom OP erstellt wurde, daher sollte es keine Eigenschaften haben, die nicht seine eigenen sind, es sei denn, jemand hat den Fehler gemacht, etwas auf dem Objektkonstruktor zu prototypisieren. In diesem Fall wären Sie in einer Welt voller Probleme und davor sollten wir uns nicht schützen müssen.Object.keys
ist nicht die Antwort, da Sie die Schlüssel nicht als Array abrufen und dann über die Schlüssel iterieren müssen, um sie abzurufen Für die Werte sollten Sie einefor..in
Schleife verwenden.Object.keys
oderhasOwnProperty()
da das Objekt in der Frage veröffentlicht ist und keine davon benötigen sollte. Der Grund, den Sie manchmalhasOwnProperty
in Plugins usw. sehen, ist, dass Sie nie wissen, was manche Leute mit demObject
Konstruktor machen könnten , aber zum größten Teil sollten die Leute nicht auf geerbte Eigenschaften von Objekten testen müssen, die sie erstellt haben, das ist ein Zeichen dafür Du machst wahrscheinlich etwas falsch.Mit ES6 und einem funktionaleren Programmieransatz könnte die Antwort von @ adeneo folgendermaßen aussehen:
Und alternativ mit
.reduce()
und Pfeilfunktionen:quelle
Diese Funktion fügt alle Daten vom Objekt zu FormData hinzu
ES6-Version von @ developer033:
jQuery-Version:
quelle
&& !(data instanceof Blob)
in meinem Fall hinzufügen , um meine Bilder hochzuladen&& !(Array.isArray(data) && !data.length)
in der "if" -Bedingung hinzugefügt , oder leeres Array würde entfernt.Die anderen Antworten waren für mich unvollständig. Ich habe mit der Antwort von @Vladimir Novopashin begonnen und sie geändert. Hier sind die Dinge, die ich brauchte und einen Fehler, den ich gefunden habe:
.prop
statt hinzugefügt werden[prop]
. Zum BeispielformData.append('photos[0][file]', file)
funktionierte nicht auf Google Chrome, währendformData.append('photos[0].file', file)
gearbeitetDer folgende Code sollte in IE11- und immergrünen Browsern funktionieren.
quelle
formData.append(root, data)
, bedeutet dies nicht, dass sie dem Stamm hinzugefügt wird.Versuchen Sie die Funktion JSON.stringify wie folgt
quelle
Ich hatte ein Szenario, in dem verschachteltes JSON linear serialisiert werden musste, während Formulardaten erstellt wurden, da der Server auf diese Weise Werte erwartet. Also habe ich eine kleine rekursive Funktion geschrieben, die den JSON wie folgt übersetzt:
In so etwas:
Der Server würde Formulardaten akzeptieren, die in diesem konvertierten Format vorliegen.
Hier ist die Funktion:
Aufruf:
Ich verwende testJSON nur, um die konvertierten Ergebnisse anzuzeigen, da ich den Inhalt von form_data nicht extrahieren kann. AJAX Post Call:
quelle
Entschuldigen Sie die späte Antwort, aber ich hatte Probleme damit, da Angular 2 das Hochladen von Dateien derzeit nicht unterstützt. Der Weg, dies zu tun, war das Senden eines
XMLHttpRequest
mitFormData
. Also habe ich eine Funktion dafür erstellt. Ich benutze Typescript . Um es in Javascript zu konvertieren, entfernen Sie einfach die Datentypdeklaration.quelle
[]
for-Objekteigenschaften in ein numerisches Array aufnehmen, um intakt zu bleibenTypeScript-Version:
https://gist.github.com/Mds92/091828ea857cc556db2ca0f991fee9f6
quelle
namespace
ist ein reserviertes Schlüsselwort inTypeScript
( typescriptlang.org/docs/handbook/namespaces.html und github.com/Microsoft/TypeScript/issues/… ). Es scheint auch, dass Sie vergessen haben, sichFile
seit dem letztenelse
Willenappend
"[object File]"
mit dem zu befassenformData
.Sie können einfach installieren
qs
:Einfach importieren:
Objekt übergeben an
qs.stringify()
:quelle
Rekursiv
quelle
Diese Methode konvertiert ein JS-Objekt in FormData:
quelle
Object.entries(value).forEach((v, k) => acc.append(`${key}[${v[0]}]`, v[1]));
In meinem Fall hatte mein Objekt auch eine Eigenschaft, die ein Array von Dateien war. Da sie binär sind, sollten sie anders behandelt werden - der Index muss nicht Teil des Schlüssels sein. Also habe ich die Antwort von @Vladimir Novopashin und @ developer033 geändert:
quelle
Ich habe dies verwendet, um meine Objektdaten als Formulardaten zu veröffentlichen.
quelle
Vielleicht suchen Sie nach diesem Code, der Ihr Javascript-Objekt empfängt, daraus ein FormData- Objekt erstellt und es dann mithilfe der neuen Fetch-API auf Ihren Server überträgt :
quelle
Ich beziehe mich auf Gudradains Antwort . Ich bearbeite es ein wenig im Typescript-Format.
quelle
Ich bin vielleicht etwas spät dran, aber das habe ich erstellt, um ein einzelnes Objekt in FormData zu konvertieren.
Wie funktioniert es? Es werden alle Eigenschaften konvertiert und zurückgegeben, die Dateiobjekte erwarten, die Sie in der Ignorierliste festgelegt haben (2. Argument. Wenn mir jemand einen besseren Weg nennen könnte, dies zu bestimmen, der helfen würde!), In eine JSON-Zeichenfolge mit
JSON.stringify
. Dann müssen Sie es auf Ihrem Server nur noch zurück in ein JSON-Objekt konvertieren.Beispiel:
Ich bin noch ein bisschen neu in HTTP-Anfragen und JavaScript, daher wäre jedes Feedback sehr dankbar!
quelle
Versuchen Sie es mit obj2fd => https://www.npmjs.com/package/obj2fd
quelle