Javascript にて FormData() を使って配列のパラメータを配列のまま API に渡したい

配列を FormData.append(k, v) で追加すると文字列になる

カンマで区切られた文字列になる。

const favorites = ['music', 'video games', 'YouTube', 'movies']
const formData = new FormData()
formData.append('favorites', favorites)
// → favorites: 'music,video games,YouTube,movies'

配列で送るサンプルコード

• lodash (配列、オブジェクト操作が簡単になるライブラリ) インストール済み
• axios (簡単に http 通信ができるライブラリ) インストール済み
• append(key + '[]', v) がポイント

import _ from 'lodash'
import axios from 'axios'

let sendParams = {
	id: 1,
	name: 'smith',
	favorites: ['music', 'video games', 'YouTube', 'movies']
}

function send(sendParams, callback) {

	let formData = new FormData()

	_.forEach(sendParams, (value, key) => {
		if (Array.isArray(value)) {
			_.forEach(value, (v, _) => {
				formData.append(key + '[]', v)
			})
		} else {
			formData.append(key, value)
		}
	})

	axios({
		method: 'post',
		baseURL: 'https://sample.com',
		url: '/users',// https://sample.com/users
		data: formData,
	})
		.then((response) => {
			// handle success
			callback(null, response.data)
		})
		.catch((error) => {
			// handle error
			if (error.response) {
				callback(error.response.status, error.response.data)
				return
			}
			// 503: Service Unavailable
			callback(503, error.message)
		})
		.finally(() => {
			// always executed
		})
}

send(sendParams, (error, data) => {
	console.log(error)
	console.log(data)
})

下記のようなパラメータで送信できる

id: 1
name: 'smith'
favorites[]: 'music'
favorites[]: 'video games'
favorites[]: 'YouTube'
favorites[]: 'movies'