こんにちは。フリーランス・コンサルタント＆エンジニアの 九保すこひ です。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、これまでこのブログでは実際に開発した様々なソースコードを公開してきました。

そして、その中でも特によくダウンロードされているのが、たった2ステップ！Vue.js で選択画像をプレビューする方法（サンプルDL可）で公開しているソースコードです。

そしてプレビュー表示は意外と需要が多いんだなと感じたので、この機能をより簡単に実装できる独自のVueディレクティブ “v-preview-input” を作り、npmとGitHubで公開することにしました。

今回はその使い方をご紹介します。

デモページ

v-preview-imageのデモページを用意しました。
ぜひ体験してみてください。

インストールする

npmでパッケージを公開しているので、次のコマンド一発でインストールが完了します。

npm i v-preview-input

また、npmではなくgitを使う方法でもOKです。

git clone https://github.com/SUKOHI/v-preview-input.git

準備

次のようにVue本体と同じくv-preview-input.jsを読み込んでください。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="/******/v-preview-input/v-preview-input.js"></script>

使い方

選択する画像が１枚だけの場合

まずdataに画像データが格納される変数（ここではprofileImage）を登録します。

new Vue({
    el: '#app',
    data: {
        profileImage: null
    }
})

そして、<input type="file">タグにv-preview-inputというディレクティブを追加し、ここへさっき追加した変数を設定します。

<input type="file" accept="image/*" v-preview-input="profileImage">

次に実際にプレビュー画像が表示される部分です。

<img :src="profileImage">

:srcに変数を指定するだけでOKです。

選択する画像が複数の場合

こちらもまずdataに変数を作りますが、こちらは配列になります。

new Vue({
    el: '#app',
    data: {
        profileImages: []
    }
})

そして、<input>タグも１枚のときとほぼ同じですが、multipleをつけるのを忘れないでください。

<input type="file" accept="image/*" v-preview-input="profileImages" multiple>

では、最後に画像プレビュー部分です。

選択された画像データは配列になって変数へ格納されるので、次のようにv-forなどを使って表示してください。

<img v-for="profileImage in profileImages" :src="profileImage">

開発のご依頼お待ちしております

開発のご依頼はこちらから: お問い合わせ

どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

ということで今回は公開したパッケージの紹介をしました。

ちなみに、元々は変数を指定する形ではなく、v-preview-inputとv-preview-imageというディレクティブを対にして対応させるつもりでしたが、こうすると複数ファイルの場合に対応できません。（もしかしてVueでプログラム的ににv-forを設定できるのでしょうか？？）

<input type="file" v-preview-input="'profile'"><br>
<img v-preview-image="'profile">

また、独自コンポーネントを作ってもよかったのですが、スタイルシートやクラスを設定しにくくなってしまったり、可読性が悪くなるためこちらも断念。結局今回の形に落ち着きました。

今後もし何かいいアプローチが思いついたら更新していくつもりです。

ではでは〜！

  Tweet