はじめに

axios で、添付ファイルありのリクエストを送信する方法を整理した。

【React】axiosを使用してmultipart/form-data形式の通信をする - モノクロタイム を参考にさせてもらった。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. NG
    2. OK
    3. 何が違うのか？
      1. Content-Type
      2. Payload(Form Data)
  5. まとめ
  6. その他・メモ
    1. transformRequest について
    2. FormData について
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls axios
axios@0.19.2 | MIT | deps: 1 | versions: 42

詳細

【React】axiosを使用してmultipart/form-data形式の通信をする - モノクロタイム に記載の通り、FormData を使ってリクエストすると良い。

NG

data 部分を単なるオブジェクトにすると失敗する。(というか、うまくファイルを送信できない)
※例外処理とかは省略。

1
2
3
4
5
6
7
const postAvator = async (image: File) => {
  const url = `https://some.company.com/api/avator`;
  const data = { image };
  const headers = { "content-type": "multipart/form-data" };
  const res = await axios.post(url, data, { headers });
  return res;
};

OK

data 部分を FormData にして、append でリクエストパラメータを追加する。

1
2
3
4
5
6
7
8
const postAvator = async (image: File) => {
  const url = `https://some.company.com/api/avator`;
  const data = new FormData();
  data.append("image", image);
  const headers = { "content-type": "multipart/form-data" };
  const res = await axios.post(url, data, { headers });
  return res;
};

何が違うのか？

Chrome の DevTools で確認した際の違い。

Content-Type

NG ケースは multipart/form-data のみ。

OK ケースは multipart/form-data; boundary=----xxxx になる。

具体的には、検証時は multipart/form-data; boundary=----WebKitFormBoundaryXXXX となっていた。

Payload(Form Data)

リクエスト時のパラメータも以下のように異なる。

NG ケースは、Request Payload として表示され、単なる JSON となっており、添付ファイル部分も空オブジェクト扱い。

OK ケースは、Form Data として表示され、添付ファイルがある箇所は (binary) の表記となる。

まとめ

その他・メモ

transformRequest について

Request Config - axios/axios を見ると transformRequest ってのがあるので、ここで処理を書いても良さそう？(未検証)

transformRequest allows changes to the request data before it is sent to the server
This is only applicable for request methods ‘PUT’, ‘POST’, ‘PATCH’ and ‘DELETE’
The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
FormData or Stream
You may modify the headers object.

1
2
3
4
transformRequest: [function (data, headers) {
  // Do whatever you want to transform the data
  return data;
}],

FormData について

FormData はブラウザでのみ利用可能なので、CLI ツールなどの場合には別のフォーマットを使う必要がありそう。

以下記事内の方法でいけるかも。

Node.js + axios で 画像を mulitpart/form-data でアップロードしようとしてハマった話 - Qiita

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list