プレビュー付きのアップロードコンポーネントを実装する「v-uploader」

プレビュー付きのアップロードコンポーネントを実装する「v-uploader」

v-uploaderとは

v-uploaderは、プレビュー付きのアップロードコンポーネントを実装するためのライブラリです。

ファイルのアップロード削除サーバーレスポンスを備えているため、対象のURLを設定するだけでフロント側の処理を作成する必要がありません。

単体のアップロードはもちろん、複数のアップロードを行うことも可能です。

 

プレビュー付きのアップロードコンポーネントを実装する「v-uploader」

 

環境

Vue 2.6.10
v-uploader

1.8.0

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm i -S v-uploader

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-uploader.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/TerryZ/v-uploader

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import vUploader from 'v-uploader';

(2)WEBページの場合

cconst vUploader = window['vUploader'].default;

2.メソッドを設定

上記で取得したvUploaderVue.use に取り込みます。

ライブラリのグローバルな設定をuploaderConfigにオブジェクト形式で設定します。
特にuploadFileUrldeleteFileUrlは必須項目です。

 

/**
 * v-uploader plugin global config
 */
const uploaderConfig = {
  uploadFileUrl: './response.json',
  deleteFileUrl: './response.json',
  showMessage: (vue, message) => {
    console.log(vue, message);
  }
}

Vue.use(vUploader, uploaderConfig);

new Vue({
  el: '#app',
  methods: {
    uploadDone:function(files){
        if(files && Array.isArray(files) && files.length){
          // 何かする
        }
      }
  }
});

3. テンプレートを準備

<v-uploader> を設置します。

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <v-uploader @done="uploadDone" :multiple="true" :language="'en'"></v-uploader>
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

プレビュー付きのアップロードコンポーネントを実装するためのライブラリでした。

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-File Upload, Form, UI Components, vue.js, ライブラリ
-, , ,