Nuxt.jsで画像ファイルをドラッグ＆ドロップで受け取り、Base64に変換してから、IMGタグで表示する・・というのをやってみます。 ついでに、Fileオブジェクトの情報（名前。タイプ・サイズ）を加えて複数ファイルをうけつけた時に一覧表っぽく表示します。 今回の実装でやりたいこと 以下のような機能の画面を実装します。 画像ファイル（JPEG・PNGのみ）をドラッグ＆ドロップで受け取る。 画像ファイルはファイル選択ダイアログでも受け取れるようにする。 ドラッグ＆ドロップは複数の画像ファイルを受け取れるようにする。 ドロップされたFileオブジェクトを受け取る。 受け取った画像ファイルを内部でBase64形式に変換する。 Base64に変換した画像ファイルを<img>タグで表示する。 取得したFileの名前・タイプ・サイズの情報を受け取って表示する。 今回はそれぞれのポイントをソースで整理

目次 はじめに Nuxt.jsを整理する方針 Nuxt.js基本要素－拡張子とフォルダの役割 ソースファイルの拡張子は「.vue」 フォルダ構成と各フォルダの役割 サンプルでやることと確認したいポイント 全Vueファイルの共通レイアウトの設定 内部リンクの書き方と画面遷移（ルーティング）などをサンプルで確認 header要素に出力する内容の書き方 assetsフォルダに置いた静的画像ファイルの参照 内部リンクによる画面遷移（NLinkタグ）の書き方 WebApiからデータを取得するなどをサンプルで確認 ソース内のブロック分けと役割 asyncData()内でaxiosを使ってWebAPIからデータを取得・表示 staticフォルダ内の静的データの参照 ルートのページに戻る内部遷移 実行イメージ テスト用：Originのチェックを行わないようにChromeを起動する方法 開発環境：Visua