POSTまたはPUTのformデータをサーバーサイドに送信する際、
axiosでは、デフォルトでJSON形式にしてrequest payloadに乗せて送られます。
HTTP.Requestは次のようになっています。
POST /some-path HTTP/1.1
Content-Type: application/json
{ "username" : "a@b.com", "password" : "xxxx" }
つまりサーバーサイド側では、formのdataとしては認識できません。
formのデータとして認識させるには、このようにします。
const params = new URLSearchParams();
params.append('username', this.username); // 渡したいデータ分だけappendする
params.append('password', this.password);
axios.post(this.serverPass + 'login', params,
...)
.then(respose => {
...
})
このように送ると、HTTP.Requestは次のようになります。
POST /some-path HTTP/1.1 Content-Type: application/x-www-form-urlencoded username=a@b.com&password=xxxx
これならば、サーバーサイド側でformデータを認識することができます。
例えばGoでは次のように扱えます。
un := req.FormValue("username")
p := req.FormValue("password")
fileを送信する場合には、次のようにします（Vueによるサンプル）。
form
<form @submit.prevent="submit"> <input type="text" v-model="username" name="username" placeholder="user name"> <input type="file" name="file" @change="selectedFile"> <input type="submit"> </form>
selectedFile(e) {
e.preventDefault();
this.uploadFile = e.target.files[0] // fileにはreadonly制約があり、v-modelは使えない。代わりにchangeイベントが推奨されている
},
submit() {
const data = new FormData(); // multipart/form-data形式のため、new FormData()を使う
data.append('username', this.username); // file形式以外も送信可能
data.append('file', this.uploadFile);
axios.post(this.serverPass + 'login', data,
...)
.then(respose => {
...
})
...
}
formでfileを含む時のContent-Typeは、multipart/form-dataになるので、new FormData()を使います（fileは文字、画像など様々な種類のデータを取り扱うため）。
new FormData()は、multipart/form-dataがそうであるように、様々な種類のデータを扱うことができます。
そのため、type="text"のformデータなども送信することが可能です。
https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
Vue.js でファイルをポストしたいとき | アライドアーキテクツ エンジニアブログ
