FormData를 multipart/form-data 문자열로 변환하고 응답을 사용하여 다시 변환

다양한 값을 ReadableStream으로 변환하는 방법에 대한 다른 기사를 작성하는 동안 FormData를 다중 부분/양식 데이터 문자열로 변환하고 응답을 사용하여 다시 변환하는 멋진 방법을 우연히 발견했습니다. 놀랍게도 FormData는 기본적으로 이 기능을 제공하지 않습니다. 그러나 대응 방법을 활용하면 매우 쉽게 이를 달성할 수 있습니다.

ChatGPT(4o 및 o1-preview 모두)에서 도움을 받으려고 했지만 힌트가 있어도 이 솔루션을 제안하거나 합성할 수 없었습니다. Google 검색에서도 결과가 나오지 않았습니다. 독창성을 주장하지는 않지만 이 접근 방식은 알려지지 않았거나 거의 알려지지 않은 것 같습니다. 나는 그러한 변환 기능이 Response API 작성자가 의도적으로 설계했다고 생각하지 않습니다. 이는 부작용에 가깝기 때문에 솔루션을 더욱 흥미롭게 만듭니다. 그래서 저는 제가 얻은 결과를 공유하고자 이 글을 쓰기로 결정했습니다.

FormData를 Multipart/Form-Data 문자열로 변환

FormData 인스턴스가 있다고 가정해 보겠습니다.

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

우리의 목표는 이 FormData 인스턴스에서 다중 부분/양식 데이터 문자열을 얻는 것입니다. 일반적인 제안에는 FormData를 문자열로 수동으로 직렬화하거나 요청을 통해 복잡한 조작을 수행하거나 이에 대한 라이브러리를 사용하는 것이 포함됩니다. 그러나 FormData를 본문으로 받아들이는 Response 생성자를 사용한 다음 text() 메서드를 호출하여 원하는 문자열 표현을 얻을 수 있습니다.

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

필요한 경우 Content-Type 헤더 및 경계와 같은 추가 값을 추출할 수도 있습니다.

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

text()를 사용하는 대신 arrayBuffer()와 같은 다른 메서드를 사용하여 FormData의 인코딩된 콘텐츠를 ArrayBuffer로 가져올 수도 있습니다. 이러한 유형의 값의 장점은 전송 가능한 개체이고 postMessage()를 사용하여 작업자 간에 효율적으로 전송할 수 있다는 것입니다(문자열과 달리 복사하지 않음을 의미). FormData 객체 자체는 양도할 수 없습니다.

Multipart/Form-Data 문자열을 다시 FormData로 변환

프로세스를 되돌리기 위해 다시 Response를 활용하지만 이번에는 formData() 메서드를 사용합니다. 이 방법의 핵심 측면은 올바른 Content-Type 헤더가 필요하다는 것입니다. 여기에는 multipart/form-data 유형과 부분을 구분하는 데 사용되는 경계가 포함되어야 합니다. 경계 값이 있으면 이를 헤더에 삽입할 수 있습니다. 그러나 다중 부분 문자열만 있고 다른 것은 없을 수도 있습니다. 이 경우 정규식을 사용하여 문자열에서 경계를 추출할 수 있습니다.

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

FormData를 직렬화하는 것과 마찬가지로 문자열뿐만 아니라 ArrayBuffer, TypedArray, ReadableStream도 FormData로 변환할 수 있습니다. Response는 이러한 값을 본문 값으로 허용하기 때문입니다.

결론

한 가지 잠재적인 단점은 두 가지 변환 유형 모두 비동기 작업이라는 것입니다. 그 외에는 이 메서드는 매우 안정적이며 디버깅이나 fetch() 외부에서 변환이 필요할 때 사용할 수 있습니다.

이 방법은 광범위한 브라우저를 지원합니다(2017년 이후 출시된 모든 브라우저에서 작동해야 함). 이 메소드는 Node.js, Deno 및 Bun이 Response 객체를 지원하는 경우(즉, fetch()를 사용할 수 있는 버전)에도 적용 가능합니다.

저처럼 여러분도 이 접근 방식에 흥미를 느끼기를 바랍니다. 이는 Response API의 기능을 활용하여 FormData를 다중 부분/양식 데이터 문자열(문자열뿐만 아니라)로 변환하거나 그 반대로 변환하는 간단하면서도 효과적인 방법입니다. 동일한 결과를 얻을 수 있는 다른 방법에 대해 의견이 있거나 알고 계시다면 댓글로 자유롭게 공유해 주세요!

위 내용은 FormData를 multipart/form-data 문자열로 변환하고 응답을 사용하여 다시 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!