画像ファイルをドラッグ＆ドロップで受け取り一覧表示する／Nuxt.js＋Buefy - SE_BOKUのまとめノート的ブログ
Nuxt.jsで画像ファイルをドラッグ＆ドロップで受け取り、Base64に変換してから、IMGタグで表示する・・というのをやってみます。 ついでに、Fileオブジェクトの情報（名前。タイプ・サイズ）を加えて複数ファイルをうけつけた時に一覧表っぽく表示します。 今回の実装でやりたいこと 以下のような機能の画面を実装します。 画像ファイル（JPEG・PNGのみ）をドラッグ＆ドロップで受け取る。 画像ファイルはファイル選択ダイアログでも受け取れるようにする。 ドラッグ＆ドロップは複数の画像ファイルを受け取れるようにする。 ドロップされたFileオブジェクトを受け取る。 受け取った画像ファイルを内部でBase64形式に変換する。 Base64に変換した画像ファイルを<img>タグで表示する。 取得したFileの名前・タイプ・サイズの情報を受け取って表示する。 今回はそれぞれのポイントをソースで整理
Nuxtアプリケーションの基本／各フォルダの役割・画面遷移・静的アクセス・WEB-APIからデータを取得 - SE_BOKUのまとめノート的ブログ
目次 はじめに Nuxt.jsを整理する方針 Nuxt.js基本要素－拡張子とフォルダの役割 ソースファイルの拡張子は「.vue」 フォルダ構成と各フォルダの役割 サンプルでやることと確認したいポイント 全Vueファイルの共通レイアウトの設定 内部リンクの書き方と画面遷移（ルーティング）などをサンプルで確認 header要素に出力する内容の書き方 assetsフォルダに置いた静的画像ファイルの参照 内部リンクによる画面遷移（NLinkタグ）の書き方 WebApiからデータを取得するなどをサンプルで確認 ソース内のブロック分けと役割 asyncData()内でaxiosを使ってWebAPIからデータを取得・表示 staticフォルダ内の静的データの参照 ルートのページに戻る内部遷移 実行イメージ テスト用：Originのチェックを行わないようにChromeを起動する方法 開発環境：Visua
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
