2019年8月20日Ajaxのアップロードでプログレスバーを表示するサンプル(DL可)さてさて、おかげさまで前回の記事でトータル200記事という節目になったわけですが、そうなると過去の記事などを見返しておこうということになりました。その結果、「昔はもっと根本的な内容を記事にしてたんだな〜」と感じたので、たまにはこれからの未来を担うプログラム初心者の方にも向けて記事を書けたらという気持ちになりました。いうことで、今回は現代のウェブ開発では必須と言ってもいいAjax関連の内容をお届けします。開発する機能は、ファイルのアップロード時に、どれだけ完了しているかを表示するというものです。これは、動画など大容量のファイルを送信するときに何も表示がないと「あれ?これってまだアップロード中なの?それともエラーで止まってるんじゃないの!?」とユーザーが迷ってしまうのを防ぐためのものです。皆さんのお役に立てると嬉しいです。合わせて読みたいまず前提としてAjax(axios)を使ってファイルをアップロードすることになりますが、アップロード先にURLがないなどエラーが発生するとうまくいきません。そのため、今回紹介するソースコードを実行するためには、あなたのサイトのhttp(s)://*******/progressにPOST送信できるようにしておいてください。Laravelを使った場合ですと、routes/web.phpに以下のようなルートを用意します。'HomeController@progress');そして、HomeController内には以下のようなメソッドを追加しておいてください。ここで送信されたファイルを操作する}なお、今回はアップロードが完了したかどうかの値を返す必要はありません。(200HTTPステータスコードが返ってくれば成功したという判断になります)プログレスバーについて今回はBootstrapのプログレスバーを使っても良かったのですが、実はHTML5には<progress></progress>という新しいタグが用意されています。そこで、今回はこのprogressタグを使って実装することにしました。基本的な使い方は以下になります。Chromeで表示するとこうなります。実際のコードでは、実際のコードです。コピペするだけで実行できるようにCDNを使っていますが、もし必要でしたらnpmなどでパッケージをインストールして実装してください。必要なパッケージは以下の3つです。</script></body></html>では、重要な部分をひとつずつ紹介していきます。各種メソッドonSelectFile()以下のタグでファイルが選択されると実行されるメソッドです。@change="onSelectFile">この中では、イベントオブジェクトeの中から選択された全ファイルを取得し、一番はじめのもの(つまりfiles[0])をVueの変数fileに格納することになります。複数ファイルを想定したコードになっているかというと、元々の仕様なのですが以下のようにするとファイルが複数選択できるようになるので、どちらの場合にも対応できるようにするためだと思われます。multiple>また、ファイル選択がキャンセルされたときは必ず初期値のnullを変数fileに格納します。これは、まずファイルを選択し、再度ファイルを選択しようとしたがやっぱりキャンセルした場合のことも想定しているためです。return;}onSubmit()「送信」ボタンをクリックした時に実行されるメソッドです。Ajaxは有名パッケージaxiosを使って実行しますが、ここで重要なのは選択したファイルを直接送信パラメータには追加できないということです。通常ですとaxiosでデータ送信するには以下のようにしてしまいそうになりますが、これは間違った例です。実際には送信はできますが、想定されているデータが送信されません。以下のようにFormDataオブジェクトを使っているのはそのためです。Largeというエラーが返ってきた場合は、PHPもしくはnginxが許可している制限を超えたファイルサイズだったことが原因です。これを回避するには、以下のURLをご覧ください。Largeが表示された時の対処法また、以下の部分はファイルが選択されていないのに送信しようとしたときのエラーメッセージになります。return;}onUpload()ここがファイルのアップロード中に(ファイルサイズによっては何度も)呼ばれる部分です。中身は、イベントオブジェクトeから以下2つの情報を取得し、それを元にしてどれだけアップロードが完了したかを計算しています。元のファイルサイズまた、this.$refs.progress.valueでプログレスバーの値を変更できるのは、タグにrefが設定されているからで、これはVueが提供する機能になります。max="100"></progress>表示の切り替え部分(Vue)このソースコードでは、はじめはファイル選択とボタンが表示されていますがファイルが選択されてアップロードをしている場合は表示する必要はありません。(逆に言うと、アップロード中に再度同じ動作をされるとめんどうです)そのため、ボタンがクリックされた時点でこの表示を消し、記事の冒頭で紹介したHTML5のプログレスバーを表示するのですが、この部分はVueを使ってリアルタイムで切り替えをしています。該当する場所は以下です。</div></div>そして、重要となるのはv-ifとv-elseの部分で、意味としては以下の2点になります。変数「uploading」が「false」の場合は、上のブロック(ファイル選択+ボタン)を表示それ以外の場合は、下のブロック(プログレスバー)を表示テストしてみるでは、最後に今回はのソースコードを実行してみましょう!前回ブログが節目だったこともあり、YouTubeに専用のチャンネルを作りましたので今後はこちらもぜひチェックしてみてください。(ブログに関する動画しか投稿するつもりはないですが・・・😂)はい!うまくいきました。ソースコードをダウンロードする今回実際に開発したソースコードを以下からダウンロードすることができます。HTTP(S)接続で、なおかつhttp(s)://******/progressへPOST送信できる必要があります。Ajaxのアップロードでプログレスバーを表示するサンプルおわりにということで、今回は私も初心を忘れない意味も込めて最近の記事と比べると、とても基本的な内容をお届けしました。今回記事を書いてみて感じたのは「やっぱりプログラムって面白い!」ってことでした。皆さんもぜひプログラムを好きでいられる工夫をして、末永く付き合っていただけると嬉しいです。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。