Menukar FormData kepada String berbilang/form-data dan Kembali Menggunakan Respons

Semasa mengerjakan artikel lain tentang menukar pelbagai nilai kepada ReadableStream, saya terjumpa helah yang kemas untuk menukar FormData kepada rentetan berbilang/bentuk-data dan kembali menggunakan Respons. Yang menghairankan, FormData tidak menyediakan fungsi ini di luar kotak. Walau bagaimanapun, dengan memanfaatkan kaedah Respons, kita boleh mencapainya dengan mudah.

Saya juga cuba mendapatkan bantuan daripada ChatGPT (kedua-dua 4o dan o1-pratonton), tetapi ia tidak dapat mencadangkan atau mensintesis penyelesaian ini, walaupun dengan petunjuk. Carian Google juga tidak menghasilkan sebarang hasil. Nampaknya pendekatan ini tidak diketahui atau kurang diketahui, walaupun saya tidak menuntut keaslian. Saya tidak fikir keupayaan untuk penukaran sedemikian sengaja direka oleh pengarang API Respons; ia lebih merupakan kesan sampingan, yang menjadikan penyelesaiannya lebih menarik. Jadi, saya memutuskan untuk menulis artikel ini untuk berkongsi penemuan saya.

Menukar FormData kepada String Berbilang Bahagian/Data

Katakan kita mempunyai contoh FormData:

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

Matlamat kami adalah untuk mendapatkan rentetan berbilang bahagian/data bentuk daripada tika FormData ini. Cadangan biasa melibatkan penyerikan FormData secara manual ke dalam rentetan atau melakukan manipulasi kompleks melalui Permintaan, atau menggunakan perpustakaan untuknya. Walau bagaimanapun, kita hanya boleh menggunakan pembina Respons, yang menerima FormData sebagai badan, dan kemudian memanggil kaedah text() untuk mendapatkan perwakilan rentetan yang dikehendaki:

// 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--

Jika perlu, kami juga boleh mengekstrak nilai tambahan seperti pengepala Jenis Kandungan dan sempadan:

// 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...'
// }

Daripada menggunakan text(), kita juga boleh menggunakan kaedah lain seperti arrayBuffer() untuk mendapatkan kandungan FormData yang dikodkan sebagai ArrayBuffer. Kelebihan jenis nilai ini ialah ia adalah objek boleh dipindahkan dan boleh dipindahkan dengan cekap antara pekerja menggunakan postMessage() (bermaksud tanpa menyalin, tidak seperti rentetan). Objek FormData itu sendiri tidak boleh dipindah milik.

Menukar Rentetan Berbilang Bahagian/Data Borang Kembali kepada FormData

Untuk membalikkan proses, kami sekali lagi menggunakan Response, tetapi kali ini kami menggunakan kaedah formData()nya. Aspek utama kaedah ini ialah ia memerlukan pengepala Jenis Kandungan yang betul, yang mesti termasuk jenis data berbilang bahagian/bentuk dan sempadan yang digunakan untuk memisahkan bahagian. Jika kita mempunyai nilai sempadan, kita boleh memasukkannya ke dalam pengepala. Walau bagaimanapun, kami mungkin hanya mempunyai rentetan berbilang bahagian dan tidak ada yang lain. Dalam kes itu, kita boleh mengekstrak sempadan daripada rentetan menggunakan ungkapan biasa.

// 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]
// ]

Sama seperti mensiri FormData, kita boleh menukar bukan sahaja rentetan tetapi juga ArrayBuffer, TypedArray dan ReadableStream ke dalam FormData, memandangkan Response menerima nilai seperti nilai badan.

Kesimpulan

Satu potensi kelemahan ialah kedua-dua jenis penukaran adalah operasi tak segerak. Selain itu, kaedah ini kelihatan agak boleh dipercayai dan boleh digunakan untuk penyahpepijatan atau apabila penukaran diperlukan di luar fetch().

Kaedah ini mempunyai sokongan penyemak imbas yang luas (ia sepatutnya berfungsi dalam mana-mana penyemak imbas yang dikeluarkan selepas 2017). Kaedah ini juga boleh digunakan dalam Node.js, Deno dan Bun jika mereka menyokong objek Respons (iaitu, versi yang fetch() tersedia).

Saya harap anda mendapati pendekatan ini menarik seperti saya. Ini adalah cara yang mudah tetapi berkesan untuk menukar FormData kepada rentetan berbilang bahagian/data bentuk (dan bukan sahaja rentetan) dan belakang, memanfaatkan keupayaan API Respons. Jika anda mempunyai sebarang pemikiran atau mengetahui kaedah lain untuk mencapai hasil yang sama, jangan ragu untuk berkongsi dalam ulasan!

Atas ialah kandungan terperinci Menukar FormData kepada String berbilang/form-data dan Kembali Menggunakan Respons. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!