会社で有料セミナーにいってもいいと言われると、お高い普段なかなかいけないような勉強会を探したりしています。これいいな!と思ったらちょっと高かったりして敬遠したことが何度かあったのに、いざ探すとなるとなかなか見つからないものですね。本題Vue.jsでファイルアップロード処理をつくった際にいろいろと勉強になったので、作成の過程を残しておくよ!正直なところ、バッドプラクティスみたいなものもいっぱいあるかもしれないし、未だにいろいろ悩んでるんだ。コンポートを作成するdrop.vueをつくるまずはHTMLVue.jsではコンポートとしてHTMLをがりがり書けるだけに、どこまでをVue.jsで書くのか、というのは悩みどころですね。今回、大まかなレイアウトはHTMLファイルとして、直接書くことにします。「タイトル」のテキスト入力欄があるだけのシンプルなフォームになります。</form>上記のHTMLにはコードを見やすくするため、スタイルのためのDOM要素だったり、classは一切書いていません。ここに、ファイルをドラッグ&ドロップでファイル選択を行うことのできる部品を追加する予定です。</form>ドラッグ&ドロップをしたタイミングでアップロードする機能はサンプルが結構あったりするのですが、今回は「タイトル」と「ファイル」を投稿するボタンを押したタイミングで合わせてサーバーに送信するところが厄介な部分になります。タイトルとファイルをサーバーにおくる最初のmain.jsさて、早速最初のプログラムmain.jsを書いていきます。main.jsには、ドラッグ&ドロップのコードは書かずに、ファイルをサーバーにAjaxで送る処理を書くことにします。いつも通りにVueインスタンスを生成します。生成する際には、simple-formクラスを要素に指定します。el:'.form',})これだけですが、大きな一歩になります。さきほどのcreate.htmlからmain.jsを読み込めるようにして置くのを忘れないようにします。サーバーにデータを送信する処理を書くでは、サーバーにデータを送信する処理を先に書いていきます。buttonタグに@clickを追記してボタンをクリックしたときの処理を書くことにします。buttonタグのtype属性を「button」にすることを忘れて、たまにあれーとなるので気をつけてください。Ajaxではなく普通のpostを行ったりします。</form>続いてmain.jsです。clickイベントが発生できているか確認するため、console.logを行うだけの処理onSubmitを書くことにします。},問題がなければ、サーバー送信処理を書くことにします。},サーバー送信処理は、FormDataとaxiosを使っておこなっています。指定しよう!とか気にしなきゃいけないのですが、FormDataを使うとそのへんを勝手にやってくれるみたいです。axiosの詳細な説明はあまりできないので、ググってほしいんだ!dataを追加するさきほど、サーバーに送信する処理を書きましたが、this.titleとthis.filesを何も定義してないので、値が入ってくることがありません。データバインディングを使って、フォームの項目とひも付けてあげます。main.jsに、こんな感じでdataを追加します。},タイトルをv-modelでひも付けてあげます。</formこれで、タイトルに何かを入力すれば、this.titleに値が反映され、投稿ボタンを押したときにサーバーにタイトルを送るようになります。filesを送る肝心のファイルですが、ドラッグ&ドロップの機能はコンポートに記載するので、現段階でひも付ける対象がなかったりします。後ほどコンポーネントで作成していくのですが、作成する前にファイルを取得するにあたって、特殊なことがあるのでここに記載します。以下は、コンポーネントではなくcreate.htmlに、直接ファイル選択を書いた例になります。</formこのように書くと、titleと同様に、v-modelを使ってデータバインディングじゃ!となるに違いありません。type="file"に対しては、v-modelでデータバインディングすることはできないです。type="file"の値が何かしらかわったときに発生するchangeイベントを使う必要があります。Vueには以下のようにonDropメソッドを追加することでデータが取得できるようになります。コンポートを作成するさてさて、ようやく本題です。前述の通り、create.htmlにinputタグを直接書いていくのももちろんいいんだけれどもコンポートにしていくよ。いろんなページで使い回せたりするんだよ!drop.vueをつくるVue.jsのコンポートですが、生成方法だったり書き方がいろいろあったりします。※以前、こちらで生成方法を書いたりしました。lang="scss"></style>まずは、シンプルにファイル選択だけができる処理を書きました。main.js側にコンポーネントとしてdrop.vueを登録してあげます。}こうすることで、create.htmlでdropタグが使えるようになります。</formこれでブラウザでみてみると、以下のように表示されることが確認できます。drop.vueコンポーネントが表示されるいつも肝心なところまでたどり着かないので不甲斐ないのですが、次回に続きます。風邪が長引いてランニングも勉強もちょっとさぼりぎみ。2018年明けましておめでとうございます。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。