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様に本当に感謝。

久々にローカル環境で作業したときにたまにやりがちなこと

とりあえずphp artisan make:migrationでマイグレーションファイル作って、さあphp artisan migrateと打って、

あれ??

https://qiita.com/hondy12345/items/d32ed749fb49e9da7de6
MySQLのサーバー立ち上げてなかった(汗)

旅行Webサービス「Trabum」構想

現在、夏季休暇で小田原に行っていて、その間にWebサービスを作ろうと言うことで、色々と頭を悩ませている。
今回作ろうと思っているのは、旅行記を書いて公開したり、他の人の旅行記を呼んだりするためのWebサービス。名前は旅行の「Travel」とアルバムの「Album」を合わせた「Trabum」(トラバムと読む)。

機能面としては、大雑把にこんな感じ。
・ユーザプロフィール(User)
・旅行記(タグ、いいね、コメント機能)(Travel, Travel_tag, Travel_like, Travel_comment)
・チェックポイント(タグ、いいね、コメント機能、写真)(Checkpoint, Checkpoint_tag, Checkpoint_like, Checkpoint_photo)
・観光地(Spot)
イメージとしては、ユーザがまず旅行記を投稿する。旅行記としては、例えばこんなイメージ。
タイトル:2017-18 年末年始北海道旅行 開始日:2017年12月29日 終了日:2018年1月4日 タグ:北海道、18きっぷ、スキー、グルメ メモ:長いので略
次に、その旅行記に対して具体的な行った場所をチェックポイントとして投稿する。
場所:北海道函館市 到着日:2017年12月29日 出発日:2017年12月30日 タグ:五稜郭、イカ飯、函館山、夜景 メモ:長いので略
場所については後述の観光地と結びついているイメージ。さらに、チェックポイントには写真を入れることが出来る。
旅行記、チェックポイントに対して他のユーザはいいねとコメントが出来る。
観光地については、1つのチェックポイントに対して1つの観光地が結びついていて、ユーザがチェックポイントを投稿するときすでにその観光地があればそれを選択して、なければ新規の観光地を追加する。観光地には地名、位置(Google Maps APIを使うことを検討)、紹介文などが入る。また、ユーザが観光地について書かれたチェックポイントの一覧を見ることが出来る。

次に、使用する技術要素としてはこんな感じか。
・PHP(7.2)
・Laravel(5.6)
・JavaScript
・Vue.js, Vuex(Vue-router,Vuetifyは使うかどうか未定)
・MariaDB
・Apache
・Valet
今回はMacのローカル環境で開発するのでValetを使おうかと。Dockerも使いたかったけど、今の低スペックマシンだとどうも微妙なので。
実際に一般公開するとなったらAWSを使おうと思っている。将来的にはスマホアプリでも投稿や閲覧が出来るようにしたいと思う。

まだ作り始めたばかりだけど、何とか今年中に一般公開できればいいなと思う。