axiosでformの値を送受信する方法【Vue.js】【Go】
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 でファイルをポストしたいとき | アライドアーキテクツ エンジニアブログ