vue.jsを使ってアプリケーションを構築する際にドラッグ&ドロップでファイルのアップロードを行いたい時、ライブラリなしでコードを書きたいと思ったことはありませんか?本文書はそんな人のためにvue.js入門者でもできるドラッグ&ドロップのファイルアップロードについて基礎から説明を行っていきます。今までライブラリに頼って一度もドラッグ&ドロップの自作にチャレンジしていない人であればこんなに簡単なの!と驚くこと間違いなしです。 初期設定 手元の環境ですぐに動作確認ができるようにvue.jsはcdnを利用します。任意のフォルダを作成し、index.htmlファイルを作成してください。 index.htmlファイルに以下のコードを記述しファイルをドロップする四角枠を作成します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8