axiosのpostでファイルと配列をFormDataで渡した場合 API側で配列がstringになってしまう

Question

#　コード

const url = 'api/user/create'
//　想定するリクエストデータ
const obj = 
{
  test_file: File
  array: ['test1','test2','test3']
}
const params = new FormData()
params.append('test_file', obj.test_file);
params.append('array', obj.array);
const config = { headers: { 'content-type': 'multipart/form-data' } };
return axios
    .post(url, params, config)
    .then(res => {
      dispatch(TestSuccess(res.data));
    })
    .catch(err => {
      dispatch(TestFailed(err));
    });

このようにaxiosのPOSTで送信しています。

API側でリクエストの値をconsole.logしてみると

"test1,test2,test3"

先ほど配列でリクエストに含めたデータがstringで受け渡されています。
なので、Fileと配列を含んで型が変わらないように送信できる方法があれば教えていただきたいです。

Answer 1

なので、Fileと配列を含んで型が変わらないように送信できる方法があれば教えていただきたいです。

無理です。FormDataとして送れる値は、ファイルもしくは文字列の2択です（MDN）。

ただし、送る側と受け取る側で「特定の形の値を配列と解釈する」とルールを決めておけば、FormDataの枠組みで配列を送ることは可能です。

• PHPなどでは、array[]のような形式のキーで送られてきた複数の値を、配列に変換するようになっています。
• JSONなど別形式にエンコードして渡すことも考えられます。

Comments

[tokuwgawa]

PHPなどでは、array[]のような形式のキーで送られてきた複数の値を、配列に変換するようになっています。
現在Node.jsを使って実装しているのですが、上記の処理はjavascriptでも同じような挙動になりますか？

[maisumakun]

受け取り側のコードも書いていただけますか？

[tokuwgawa]

すみません。自分自身で試した結果、配列になることがわかったので、解決しました。
ありがとうございました。