Konvertieren von FormData in einen mehrteiligen/Formulardaten-String und zurück mithilfe einer Antwort

Während ich an einem anderen Artikel über das Konvertieren verschiedener Werte in ReadableStream arbeitete, bin ich auf einen netten Trick gestoßen, um FormData mithilfe der Antwort in einen mehrteiligen/Formulardaten-String und zurück zu konvertieren. Überraschenderweise bietet FormData diese Funktionalität nicht standardmäßig. Durch den Einsatz der Response-Methoden können wir dies jedoch ganz einfach erreichen.

Ich habe sogar versucht, Hilfe von ChatGPT zu erhalten (sowohl 4o als auch o1-Vorschau), aber es konnte diese Lösung nicht vorschlagen oder synthetisieren, selbst mit Hinweisen. Auch die Google-Suche brachte keine Ergebnisse. Es scheint, dass dieser Ansatz unbekannt oder wenig bekannt ist, obwohl ich keinen Anspruch auf Originalität erhebe. Ich glaube nicht, dass die Möglichkeit einer solchen Konvertierung von den Autoren der Response-API absichtlich entwickelt wurde; Es ist eher ein Nebeneffekt, was die Lösung noch interessanter macht. Deshalb habe ich beschlossen, diesen Artikel zu schreiben, um meine Erkenntnisse zu teilen.

Konvertieren von FormData in einen Multipart/Form-Data-String

Nehmen wir an, wir haben eine Instanz von FormData:

const formData = new FormData();
formData.set('value', 123);
formData.set(
  'myfile',
  new File(['{"hello":"world"}'], 'demo.json', { type: 'application/json' })
);

Unser Ziel ist es, aus dieser FormData-Instanz eine mehrteilige/Formulardatenzeichenfolge zu erhalten. Gängige Vorschläge umfassen die manuelle Serialisierung von FormData in einen String oder die Durchführung komplexer Manipulationen über Request oder die Verwendung einer Bibliothek dafür. Wir können jedoch einfach den Response-Konstruktor verwenden, der FormData als Textkörper akzeptiert, und dann seine text()-Methode aufrufen, um die gewünschte Zeichenfolgendarstellung zu erhalten:

// FormData -> multipart/form-data string
function convertFormDataToMultipartString(formData) {
  return new Response(formData).text();
}

const multipartString = await convertFormDataToMultipartString(formData);

console.log(multipartString);
// Example output:
// ------WebKitFormBoundaryQi7NBNu0nAmyAhpU
// Content-Disposition: form-data; name="value"
//
// 123
// ------WebKitFormBoundaryQi7NBNu0nAmyAhpU
// Content-Disposition: form-data; name="myfile"; filename="demo.json"
// Content-Type: application/json
//
// {"hello":"world"}
// ------WebKitFormBoundaryQi7NBNu0nAmyAhpU--

Bei Bedarf können wir auch zusätzliche Werte wie den Content-Type-Header und die Grenze extrahieren:

// FormData -> multipart/form-data
async function convertFormDataToMultipart(formData) {
  const response = new Response(formData);
  const contentType = response.headers.get('Content-Type');
  const boundary = contentType.match(/boundary=(\S+)/)[1];

  return {
    contentType,
    boundary,
    body: await response.text(),
  };
}

const multipart = await convertFormDataToMultipart(formData);

console.log(multipart);
// {
//   contentType: 'multipart/form-data; boundary=----WebKitFormBoundarybfJIH5LgEGPqNcqt',
//   boundary: '----WebKitFormBoundarybfJIH5LgEGPqNcqt',
//   body: '------WebKitFormBoundarybfJIH5LgEGPqNcqt\r\n...'
// }

Anstatt text() zu verwenden, können wir auch andere Methoden wie arrayBuffer() verwenden, um den codierten Inhalt von FormData als ArrayBuffer zu erhalten. Der Vorteil dieser Art von Wert besteht darin, dass es sich um ein übertragbares Objekt handelt und mithilfe von postMessage() effizient zwischen Workern übertragen werden kann (d. h. ohne Kopieren, im Gegensatz zu einer Zeichenfolge). Das FormData-Objekt selbst ist nicht übertragbar.

Multipart/Form-Data-String zurück in FormData konvertieren

Um den Prozess umzukehren, verwenden wir erneut Response, dieses Mal jedoch die Methode formData(). Ein wichtiger Aspekt dieser Methode besteht darin, dass sie den richtigen Content-Type-Header erfordert, der den Multipart-/Formulardatentyp und die zum Trennen der Teile verwendete Grenze enthalten muss. Wenn wir den Grenzwert haben, können wir ihn in den Header einfügen. Möglicherweise haben wir jedoch nur die mehrteilige Zeichenfolge und sonst nichts. In diesem Fall können wir die Grenze mithilfe eines regulären Ausdrucks aus der Zeichenfolge extrahieren.

// multipart/form-data string -> FormData
async function convertMultipartStringToFormData(multipartString) {
  const boundary = multipartString.match(/^\s*--(\S+)/)[1];

  return new Response(multipartString, {
    headers: {
      // Without the correct header, the string won't be parsed,
      // and an exception will be thrown on formData() call
      'Content-Type': 'multipart/form-data; boundary=' + boundary,
    },
  }).formData();
}

const restoredFormData = await convertMultipartStringToFormData(multipartString);

console.log([...restoredFormData]);
// [
//   ['value', '123'],
//   ['myfile', File]
// ]

Genau wie bei der Serialisierung von FormData können wir nicht nur Strings, sondern auch ArrayBuffer, TypedArray und ReadableStream in FormData konvertieren, da Response solche Werte als Body-Wert akzeptiert.

Abschluss

Ein potenzieller Nachteil besteht darin, dass es sich bei beiden Konvertierungsarten um asynchrone Vorgänge handelt. Ansonsten scheint die Methode recht zuverlässig zu sein und kann zum Debuggen oder wenn eine Konvertierung außerhalb von fetch() erforderlich ist, verwendet werden.

Diese Methode bietet umfassende Browserunterstützung (sie sollte in jedem Browser funktionieren, der nach 2017 veröffentlicht wurde). Die Methode ist auch in Node.js, Deno und Bun anwendbar, wenn sie das Response-Objekt unterstützen (d. h. Versionen, in denen fetch() verfügbar ist).

Ich hoffe, dass Sie diesen Ansatz genauso faszinierend finden wie ich. Dies ist eine einfache, aber effektive Möglichkeit, FormData in einen mehrteiligen/Formulardaten-String (und nicht nur einen String) und zurück zu konvertieren und dabei die Funktionen der Response-API zu nutzen. Wenn Sie irgendwelche Gedanken haben oder andere Methoden kennen, um das gleiche Ergebnis zu erzielen, können Sie diese gerne in den Kommentaren teilen!

Das obige ist der detaillierte Inhalt vonKonvertieren von FormData in einen mehrteiligen/Formulardaten-String und zurück mithilfe einer Antwort. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!