vue js code

Sebelum foto atau gambar diupload, biasanya kita ingin melakukan image preview atau menampilkan gambar di sisi client sebelum dikirim ke server.

nah berikut ini adalah contoh program membuat image preview dengan vue js, silahkan perhatikan kode dibawah


Disini kita punya satu buah Component bernama "App" di file App.vue
pada component App kita punya dua buah method yaitu :

Pertama, method handlefoto() yang dipanggil pada form <input type="file" /> menggunakan event change. Kemudian akan menyimpan data file kedalam property foto dengan memanfaatkan $refs.

Kedua, method readImage() berfungsi untuk mengisi property url_foto dengan dengan file yang telah diubah menjadi url menggunakan URL.createObjectURL()

kemudian property url_foto dipanggil ke tag <img /> dan ditampilkan menjadi sebuah gambar dengan memanfaatkan props :src

Hasilnya dapat dilihat pada gambar berikut

hasil image preview

Sekian dan terima kasih, jika ada pertanyaan, silahkan bertanya di komentar