技術向上

プログラミングの学び、気になるテクノロジーやビジネストレンドを発信

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

http - What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab - Stack Overflow

Can't get a .post with 'Content-Type': 'multipart/form-data' to work · Issue #318 · axios/axios · GitHub

Vue.js でファイルをポストしたいとき | アライドアーキテクツ エンジニアブログ