Seperti yang kita ketahui bahwa vue.js merupakan salah satu framework javascript yang cukup mudah untuk kita pahami, Vue.Js juga merupakan progressive framework yang berfokus kepada pengembangan website dalam bentuk tampilan dari sebuah website. Pada Vue.js memilki banyak keunggulan salah satunya yaitu kita dapat menggabungkan atau dikombinasi dengan berbagai script atau library salah satunya yaitu vue.js dapat dikombinasikan dengan menggunakan framework Laravel.

Untuk situs resmi dari vue.js teman-teman bisa kunjungi website vue.js nya yaitu https://vuejs.org/ Pada materi kali ini kita akan membahas tentang bagaimana Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js, fitur yang akan kita buat kali ini sangat berguna pada saat melakukan proses upload gambar jadi user dapat melihat gambar yang akan di upload sebelum file atau gambar tersebut masuk kedalam database dan folder asset kita.

Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js yang akan kita buat kali ini yaitu seperti dibawah ini :

Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js

Pada gambar diatas dapat kita lihat bahwa kita dapat melihat gambar yang akan kita upload sebelum melakukan proses upload datanya, Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js langkah pertama pastikan teman-teman telah mempersiapkan file projectnya, kemuadian teman-teman juga telah melakukan installasi dan menjalankan perintah npm run watch, karena npm npm run watch tersebut berfungsi untuk meng-build script yang kita kerjakan jadi setiap script vue.js yang kita buat ataupun yang kita edit akan tersingkronisasi.

Selanjutnya silahkan teman-teman buat sebuah tag html yaitu tag input dan tag img, tag input tersebut berungsi untuk mengambil file atau gambar yang terdapat pada komputer kita, sedangkan tag img tersebut berfungsi untuk menampilkan gambar yang kita pilih dari komputer kita untuk scriptnya seperti dibawah ini :

Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js

Berikutnya kita akan membuat untuk proses untuk menampilkan gambarnya untuk scriptnya seperti dibawah ini :

Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js

Jika semua prosesnya benar jika kita jalankan pada browser dan kita coba pilih gambar yang akan kita kita upload maka akan terlihat hasilnya seperti dibawah ini :

Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js

Oke teman-teman itulah pembahasan kita pada tutorial kali ini tentang Cara Menampilkan Gambar Sebelum di Upload Menggunakan Laravel Vue.js.

Semoga bermanfaat.

Terima kasih.

WhatsApp chat