[vue.js] fileアップロード用のdrag&dropエリアを持つコンポーネントを作成する

vue.jsでdrag&dropを使用したアップロード用コンポーネントを作っていきます。

環境等

項目 バージョン
node v10.15.3
npm 6.4.1
vue.js 2.6.10

実装

drag&dropエリア

エリアの作成

divタグで適当な大きさのボックスを作成します。
今回は、以下サイズのエリアになります。

  • min-width: 200px
  • min-height: 200px
  • width: 100%
  • height: 100%

イベントの設定

drop,dragoverイベントのブラウザデフォルトの処理が動かないようにすることが重要です。
デフォルトの処理が実行されると、dropしたファイルをブラウザが表示してしまうため、実行したいdrop処理が実行されません。

dragoverイベントに対しては、特にイベントを指定したいわけではなくデフォルト処理を止めたいだけなので、.prevent修飾子を利用します。
dropも同様に利用したうえで、fileを取得する処理を記載しています。

取得したファイル情報はカスタムイベントで親コンポーネントに返しています。
リスナに以下の様な関数を登録すれば、Amplify Storageを利用してS3にputすることができます。

コード

コンポーネントのコードのみとなります。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA