【Vue】画像プレビューを導入
画像アップロード機能を導入するときにプレビューできると便利じゃないですか。
JavaScript弄る必要があったのですが、慣れたVueで実装することにしました。
なお、この記事の段階ではRailsのプロジェクトに対して適当に導入しているので、ある程度実装できたら、gemからVueを入れたほうがいいかもしれないですね。
やり方
Vueの環境設定
お手軽にCDNをVue公式サイトからコピー。<head>内にCDNをペーストすればOKです。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
また、Vueと紐付けるためのidを任意の箇所に設定してください。
input要素とVueを組み合わせる
<input type="file">に対し、ref="preview"属性を追加します。refを追加することで、Vueからアクセスすることが出来ます。
ファイルを取得
上記のinput要素を更に改良し<input type="file" ref="preview" @change="uploadImage">とします。
@change="uploadImage"は、Vueよりchangeイベント：uploadImageメソッドを実行します。
uploadImageメソッドを追加
uploadImageメソッドを追加します。また、合わせて他のVueのコードを追加します。
new Vue({
el: "#app",
data() {
return {
message:"Try Preview!",
url: "",
}
},
methods: {
uploadFile() {
const file = this.$refs.preview.files[0];
this.url = URL.createObjectURL(file)
}
}
})
URL.createObjectURLは、その名のとおり、オブジェクトのURLを生成します。この生成したURLを用いて画像プレビューを導入することができます。
画像プレビューを表示
dataで宣言したurlに画像プレビュー用urlが設定されているので、imgタグから表示させます。
<img :src="url">
これで画像表示が可能となります。
参考
このサイトを参考にさせていただきました！
