axiosを利用してVue.jsからサーバーサイドにFormDataを送る方法

vuejsからサーバーサイドへFormDataを送る方法を備忘録として載せます.

方法

axiosはデフォルトではjson形式としてリクエストを送信する.
そのためFormDataとしてリクエストを送るためには, 以下のように FormData オブジェクトを作成, インスタンス化した後, append() メソッドで送りたい値を付与する.

const params = new FormData()
params.append( key, value );

具体例

v-model='mailAddress'
v-model='password'

import axios from 'axios'

const params = new FormData();
params.append('mailAdress', this.mailAddress);
params.append('password', this.password);

axios.post(
   ' URL ',
    params,
   { headers: {'Content-Type':'application/json'} } //Content-Typeを記述
)
.then(response => {
   ...
});

このようにすることでサーバーサイドにFormDataとして送ることができる.

参考文献

• https://www.npmjs.com/package/axios