タグ: Axios

今月こそはVuexについてまとめようと思っていたのですが、Vuexについてはじっくり余裕を持って書けるときに書きたいということで、今回はAxios（Ajaxリクエストを送るためのpromiseベースのHTTPクライアント）でファイル送信を行うときにハマった話を書こうと思います。

今回やろうとしたのは、画像ファイルとかも含む編集画面で、例えばVue.jsでモーダルの編集フォームを作って、PATCHメソッドでAjaxで編集内容を送信するというケースでした。
まず、下記がうまくいかないケースです。

let url = '/send';
let data = new FormData();
data.append("file", file);
$('.btn').not('.vue_disabled').prop('disabled', true);
let self = this;
axios({'patch', url, data})
    .then(function (response) {
        //正常処理
    })
    .catch(function (error) {
        //エラー処理
    });

そしたらフォームが空になっていました（大汗）。
何故うまくいかないかわかりますか？
正解はaxiosのメソッドにはgetとかpostとかはあってもpatchというメソッドは用意されていないのです。
PHPがPOSTメソッド以外ではapplication/x-www-form-urlencodedやmultipart/form-dataで渡されたパラメタの処理をしてくれない仕様だから
です。（2018/9/9 一部修正、こちら参照）なので、どうしてもpatchで送りたいときは、下記のようにします。

let url = '/send';
let data = new FormData();
data.append("file", file);
data.append('_method', 'PATCH');
$('.btn').not('.vue_disabled').prop('disabled', true);
let self = this;
axios({'post', url, data})
    .then(function (response) {
        //正常処理
    })
    .catch(function (error) {
        //エラー処理
    });

axiosのメソッドとしてはpostだけど、送る時のデータにpatchメソッドであるという情報を含めるのです。
これで一安心です。

ちなみに、今回のはなかなか気が付かず、かなり悩んだのですが、色々ググってこちらのページに行き着いてようやくわかったというものです。
Laracasts様に本当に感謝。