node-fetchの2系でmultipart/form-dataでPOSTする方法
2022-08-26
JavaScriptのfetchでmultipart/form-dataでPOSTする手順がライブラリなどで微妙に異なるので node-fetch
の2系で行う手順をまとめてみました。
お急ぎの人用
const fetch = require('node-fetch');
const FormData = require('form-data');
const formData = new FormData();
// 文字列の場合
formData.append('key', 'value');
// ファイルの場合
const data = ... // Buffer、 Readable stream
formData.append('file', data, 'filename.txt');
// リクエスト
const opts = {
method: 'POST',
body: formData,
};
const res = await fetch(url, opts);
詳細
form-data が必要なのでインストールします。
$ yarn add form-data
requireで読み込みます。
const fetch = require('node-fetch');
const FormData = require('form-data');
FormDataをnewしてパラメータを設定します。
const formData = new FormData();
第一引数がパラメータのキー、第二引数が値です。
値が文字列の場合はそのまま指定できます。
formData.append('key', 'value');
ファイルを指定する場合は Buffer や Readable stream が指定できます。
合わせて第三引数を指定する必要がありファイル名を指定指定します。
formData.append('file', data, 'filename.txt');
オブジェクトで渡せばファイル名以外も指定可能。
formData.append('file', data, { filename: 'filename.txt', contentType: 'image/jpeg' });
最後にリクエストします。
内部でよしなにやってくれるのでリクエストヘッダに Content-Type の指定は不要です。
const opts = {
method: 'POST',
body: formData,
};
const res = await fetch(url, opts);
