>  기사  >  웹 프론트엔드  >  node-fetch/form-data를 Node.js 네이티브 API로 마이그레이션

node-fetch/form-data를 Node.js 네이티브 API로 마이그레이션

王林
王林원래의
2024-07-28 06:07:021132검색

Migrating node-fetch/form-data to Node.js native APIs

Node v16.15.0 및 v17.5.0이 출시되면서 Fetch API 및 FormData가 도입되었습니다. 그 전에는 Node.js에서 브라우저와 유사한 API를 사용하기 위해 node-fetch 및 form-data 패키지가 사용되었습니다. node-fetch/form-data 패키지를 Node.js 네이티브 API로 마이그레이션하려면 타사 패키지의 import 문을 제거하여 일부 변경이 가능하지만 파일과 같은 Node.js 기능을 사용할 때 명심해야 할 중요한 고려 사항이 있습니다. 체계. 이 문서에서는 node-fetch/form-data 패키지에서 Node.js 네이티브 API로 마이그레이션하는 방법을 간략하게 설명합니다.

마이그레이션 개요

 import fs from 'node:fs';
-import FormData from 'form-data';
-import fetch from 'node-fetch';

-const file = fs.createReadStream('secret.txt');
+const file = await fs.openAsBlob('secret.txt', { type: 'text/plain' });
 const form = new FormData();
-form.append('file', file);
+form.append('file', file, 'secret.txt');

 const response = await fetch('https://example.com/upload', {
   method: 'POST',
   body: form,
 });

세부

유형의 비호환성

form-data 패키지와 Node.js FormData는 호환되지 않으며 Fetch API를 통해 직접 전달할 수 없습니다. 양식 데이터를 기본 Fetch API에 전달하는 경우 요청 본문은 [object FormData] 문자열이 됩니다.

import FormData from 'form-data';

const form = new FormData();
await fetch('https://example.com/upload', {
  method: 'POST',
  body: form,
});

// [object FormData]

form-data 패키지는 Node.js의 fs.ReadStream을 허용합니다. 기본 API는 브라우저 호환 Blob을 허용합니다. 파일에서 Blob을 생성하려면 Node.js v19.8.0에 추가된 fs.openAsBlob()을 사용하면 됩니다. fs.ReadStream을 네이티브 API의 FormData에 전달하면 값은 [object Object]가 됩니다.

import fs from 'node:fs';

const file = fs.createReadStream('secret.txt');
const form = new FormData();
form.append('file', file);

// Content-Disposition: form-data; name="file"
// 
// [object Object]

내부 동작의 비호환성

form-data 패키지는 fs.ReadStream에서 파일 이름을 가져와 이를 파일 이름 필드로 사용합니다(내부 구현). 또한 파일 이름에서 파일 형식을 결정하고 Content-Type 헤더를 설정합니다(내부 구현).

Blob에는 파일 이름이 없으므로 수동으로 지정해야 합니다. Content-Type이 지정되지 않은 경우 기본 API의 FormData는 기본적으로 application/octet-stream으로 설정됩니다. fs.openAsBlob()의 인수에서 명시적으로 Content-Type을 지정할 수 있습니다.

const file = await fs.openAsBlob('secret.txt');
const form = new FormData();
form.append('file', file);

// Content-Disposition: form-data; name="file"; filename="blob"
// Content-Type: application/octet-stream
const file = await fs.openAsBlob('secret.txt', { type: 'text/plain' });
const form = new FormData();
form.append('file', file, 'secret.txt');

// Content-Disposition: form-data; name="file"; filename="secret.txt"
// Content-Type: text/plain

결론

Fetch API와 FormData가 Node.js v21.0.0부터 Stability: 2(Stable)로 변경되었습니다. fs.openAsBlob()은 최신 버전의 Node.js(2024년 7월 27일 현재 v22.5.1)에서 여전히 Stability: 1(실험적)입니다. 이전 런타임에서 실행하거나 기능 변경 가능성이 있는 실험적 API를 사용할 때는 주의가 필요합니다.

위 내용은 node-fetch/form-data를 Node.js 네이티브 API로 마이그레이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.