Cara Mengambil Gambar dari Storage di Laravel dengan Vue.js

by

Apakah Anda sedang mencari Laravel Vue get image from storage, jika iya? maka Anda berada di website yang tepat.

Semoga artikel berikut ini dapat bermanfaat.

Laravel adalah salah satu framework PHP yang populer untuk pengembangan aplikasi web, sementara Vue.js adalah library JavaScript yang kuat untuk membangun antarmuka pengguna yang interaktif. Kombinasi keduanya memberikan pengalaman pengembangan yang luar biasa. Salah satu tugas umum dalam pengembangan aplikasi web adalah mengambil dan menampilkan gambar dari penyimpanan (storage) Laravel. Dalam artikel ini, kita akan membahas cara mengambil gambar dari storage di Laravel dengan bantuan Vue.js, dan ini akan menjadi panduan lengkap yang mudah diikuti.

Mengapa Anda Perlu Mengambil Gambar dari Storage di Laravel?

Sebelum kita masuk ke langkah-langkah praktis, mari kita pahami mengapa Anda perlu mengambil gambar dari storage di Laravel:

  1. Penyimpanan File yang Terpusat: Laravel menyediakan fasilitas penyimpanan file yang terpusat. Anda dapat mengunggah file, seperti gambar, ke penyimpanan ini tanpa harus menyimpannya di direktori publik Anda. Ini membantu menjaga struktur direktori proyek yang lebih teratur.
  2. Keamanan: Anda dapat menyimpan file yang bersifat rahasia atau penting di dalam penyimpanan Laravel. Ini melindungi file-file tersebut dari akses yang tidak sah melalui URL publik.
  3. Optimalisasi Kinerja: Mengambil gambar dari penyimpanan Laravel memungkinkan Anda untuk mengoptimalkan kinerja dengan cache gambar atau memanipulasi gambar sebelum menampilkannya.
  4. Pemeliharaan yang Mudah: Jika Anda perlu memperbarui atau mengganti gambar, Anda hanya perlu melakukan perubahan di penyimpanan Laravel, tanpa perlu mengubah tautan URL.
BACA JUGA  Optimalkan Kinerja Aplikasi Laravel dengan JIT Compiler

Langkah 1: Konfigurasi Penyimpanan Laravel

Langkah pertama dalam mengambil gambar dari penyimpanan di Laravel adalah mengkonfigurasi penyimpanan Laravel agar berfungsi dengan baik. Laravel menyediakan beberapa driver penyimpanan, termasuk local (lokal server), s3 (Amazon S3), dan lainnya. Anda dapat mengatur konfigurasi ini di berkas config/filesystems.php.

Berikut adalah contoh konfigurasi untuk penyimpanan lokal:

‘disks’ => [
‘local’ => [
‘driver’ => ‘local’,
‘root’ => storage_path(‘app/public’),
‘url’ => env(‘APP_URL’).’/storage’,
‘visibility’ => ‘public’,
],
],

Pastikan bahwa Anda telah menjalankan perintah php artisan storage:link untuk membuat symlink antara direktori “public/storage” dan “storage/app/public”. Ini memungkinkan akses publik ke gambar dan file yang disimpan di penyimpanan Laravel.

Langkah 2: Mengunggah Gambar ke Penyimpanan Laravel

Langkah selanjutnya adalah mengunggah gambar ke penyimpanan Laravel. Anda dapat melakukannya dengan menggunakan fungsi store pada objek Illuminate\Http\UploadedFile yang mewakili gambar yang diunggah.

Contoh penggunaan dalam controller Laravel:

public function uploadImage(Request $request)
{
$image = $request->file(‘image’);
$path = $image->store(‘images’, ‘public’);

return response()->json([‘path’ => $path]);
}

Kode di atas akan mengunggah gambar ke direktori “storage/app/public/images” dan mengembalikan path gambar yang diunggah.

Langkah 3: Menampilkan Gambar dengan Vue.js

Sekarang kita akan memasuki bagian yang lebih menarik, yaitu bagaimana menampilkan gambar tersebut di antarmuka pengguna menggunakan Vue.js.

3.1 Instalasi Vue.js

Pastikan Anda telah menginstal Vue.js dalam proyek Laravel Anda. Jika belum, Anda dapat melakukannya dengan menjalankan perintah:

BACA JUGA  Panduan Membuat CRUD API Laravel: Langkah demi Langkah

npm install vue

3.2 Buat Komponen Vue

Selanjutnya, buat komponen Vue untuk menampilkan gambar. Anda dapat melakukannya dengan membuat berkas .vue baru di direktori proyek Anda atau menggunakan berkas .vue yang sudah ada.

Contoh komponen Vue yang sederhana (ImageUploader.vue):

<template>
    <div>
        <input type="file" @change="uploadImage">
        <img :src="imageUrl" v-if="imageUrl">
    </div>
</template>

<script>
export default {
    data() {
        return {
            imageUrl: null,
        };
    },
    methods: {
        uploadImage(event) {
            const file = event.target.files[0];
            const formData = new FormData();
            formData.append('image', file);

            axios.post('/upload-image', formData)
                .then(response => {
                    this.imageUrl = `/storage/${response.data.path}`;
                });
        },
    },
};
</script>

3.4 Menerapkan Tampilan

Sekarang komponen Vue akan menampilkan tombol unggah gambar dan gambar yang diunggah.

Kesimpulan

Mengambil gambar dari penyimpanan di Laravel dengan Vue.js adalah langkah yang mudah dan bermanfaat dalam pengembangan aplikasi web Anda. Anda dapat mengunggah gambar ke penyimpanan Laravel, mengambilnya, dan menampilkannya dengan mudah di antarmuka pengguna Anda. Dalam artikel ini, kami telah menjelaskan langkah-langkah untuk mengatur penyimpanan Laravel, mengunggah gambar, dan menampilkan gambar dengan Vue.js. Semoga panduan ini bermanfaat dalam pengembangan proyek Laravel Anda yang berikutnya.