axios v0.27からmultipart/form-dataが簡単に送れるようになった

はじめに

axiosでmultipart/form-data形式のリクエストを投げるときに、
うまくいかなくてハマったことのある人は多いんじゃないでしょうか？

例えばこの記事がドンピシャであります！
Node.js + axios で 画像を mulitpart/form-data でアップロードしようとしてハマった話

コード引用

const fs = require('fs')
const axios = require('axios')
const FormData = require('form-data')

const uploadImage = async ({ auth_token, imageFilePath }) => {
  const form = new FormData()
  const file = fs.createReadStream(imageFilePath)
  form.append('image_file', file)
  const config = {
    headers: {
      'X-AUTH-Token': auth_token,
      'X-API-Token': env.API_TOKEN,
      ...form.getHeaders(),  // ← ← ← ← ここ!!
    },
  }
  const result = await axios.post(env.API_BASE_URL + 'api/v1/images', form, config)
}

getHeaders()を使ってヘッダーを設定しないと、
multipart/form-dataになってくれなかったのです。。。。

v0.26までは！！！

v0.27からは余計なこと考えなくてよいのです！

リリースノートがこちら
https://github.com/axios/axios/releases/tag/v0.27.0

Added a multipart/form-data testing playground allowing contributors to debug changes easily (#4465)

以下のようにgetHeaders()を省略しても、
ちゃんとmultipart/form-dataになってくれるようになりました〜。

const fs = require('fs')
const axios = require('axios')
const FormData = require('form-data')

const uploadImage = async ({ auth_token, imageFilePath }) => {
  const form = new FormData()
  const file = fs.createReadStream(imageFilePath)
  form.append('image_file', file)
  const config = {
    headers: {
      'X-AUTH-Token': auth_token,
      'X-API-Token': env.API_TOKEN,
    },
  }
  const result = await axios.post(env.API_BASE_URL + 'api/v1/images', form, config)
}

参考

この記事でnode-fetchとaxiosの違いに触れられていて、

Nodeでmultipart/form-dataを送る

なぜ node-fetch はヘッダーでgetHeaders()を利用しなくていいのか？
理由は単純で、form-dataを特別に扱っている。
https://github.com/node-fetch/node-fetch/blob/c167190c6ee21234ba41bd8430700d4720bf64ce/src/body.js#L320-L323

axiosもv0.27で似たような処理が入ったということですね。
https://github.com/axios/axios/pull/4465/files

ちなみにこの記事執筆時点で、ずっとバージョン0.xxだったaxiosに
ようやくv1.0.0-alpha.1が登場していました！

betaじゃなくてalphaというのが相変わらず慎重な感じですが、
v1.0のリリースも待ち遠しいですね！

ではまた〜。