Laravel'de Resim Yükleme Nasıl Yapılır?

Merhaba Laravel Dostları,

Bu Laravel rehberinde, Laravel'de Resim Yükleme işlemini açıklayacağım.

Bu adımları kullanarak, Laravel'de herhangi bir ortam dosyasını akıllıca yükleyebilirsiniz. Başlamadan önce bazı ön koşullara ihtiyacımız var.

Laravel'de Resim Yükleme Adımları:

Adım 1: Spatie medya kütüphanesini yükleyin

Aşağıdaki komutu projenizin kök dizinine çalıştırın ve projenize Spatie/laravel-medialibrary paketini ekleyin:

$ composer require spatie/laravel-medialibrary

Spatie/laravel-medialibrary'nin tanıtımı:

Bu paket, her türlü dosyayı Eloquent modelleriyle ilişkilendirebilir. Çalışmak için basit, akıcı bir API sağlar.

Adım 2: Spatie/laravel-medialibrary'yi yapılandırın

Aşağıdaki komutu çalıştırın:

$ php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" –tag="migrations"

Bu komut, migrations dosyasını ve hizmet sağlayıcısını yayınlar.

$ php artisan migrate

Veritabanınıza medya tablosunu taşıyın.

Adım 3: Kullanıcı rotasını oluşturun

route/web.php dosyanıza aşağıdaki kodu ekleyin:

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
 
Route::get('/users', [UserController::class, 'index'])->name('user.index');
Route::get('/user', [UserController::class, 'create'])->name('user.create');
Route::post('/user', [UserController::class, 'store'])->name('user.store');

Adım 4: İsteği işlemek için bir Controller oluşturun

$ php artisan make:controller UserController

Şimdi aşağıdaki dizine gidin:

app/Http/Controllers/UserController.php

Ve aşağıdaki kodu ekleyin:

<?php
 
namespace App\Http\Controllers;
 
use App\Models\User;
use Illuminate\Http\Request;
 
class UserController extends Controller
{
    public function index(Request $request)
    {
        $users = User::all();
        return view('user.index', compact('users'));
    }
 
    public function create(Request $request)
    {
        return view('user.create');
    }
 
    public function store(Request $request)
    {
        $user = User::create([
            'name' => $request->name,
            "email" => $request->email,
            "password" => $request->password,
        ]);
        if($request->hasFile('avatar') && $request->file('avatar')->isValid()){
            $user->addMediaFromRequest('avatar')->toMediaCollection('avatar');
        }
        return redirect()->route('user.index');
    }
}

Adım 5: Bir Blade dosyası oluşturun

View dizininizde, create.blade.php ve index.blade.php adında 2 dosya oluşturun.

resources/views/user/index.blade.php dosyasına gidin ve aşağıdaki kod parçacığını ekleyin:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel'de Medya Yükleme</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="d-flex p-2 bd-highlight mb-3">
        <a href="{{ route('user.create') }}" class="btn btn-dark">Ekle</a>
    </div>
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th>İsim</th>
            <th>E-posta</th>
            <th width="30%">Avatar</th>
        </tr>
        </thead>
        <tbody>
        @foreach($users as $key=>$item)
        <tr>
            <td>{{ ++$key }}</td>
            <td>{{ $item->name }}</td>
            <td>{{ $item->email }}</td>
            <td><img src="{{$item->getFirstMediaUrl('avatar', 'thumb')}}" / width="120px"></td>
        </tr>
        @endforeach
        </tbody>
    </table>
</div>
</body>
</html>

resources/views/user/create.blade.php dosyasına gidin ve aşağıdaki kodu ekleyin:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel'de Medya Yükleme</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
    <div class="col-6 m-auto">
        <div class="card ">
            <div class="card-header">
                <div class="d-flex p-2 bd-highlight mb-3 justify-content-between">
                    <h4 class="card-title m-0">Kullanıcı Oluştur</h4>
                    <a href="{{ route('user.index') }}" class="btn btn-outline-danger btn-sm h-auto">Geri Git</a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('user.store') }}" enctype="multipart/form-data" method="post">
                    @csrf
                    <div class="mb-3">
                        <label>İsim</label>
                        <input type="text" name="name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label>E-posta</label>
                        <input type="email" name="email" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label>Şifre</label>
                        <input type="password"

                               name="password" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label>Avatar:</label>
                        <input type="file" name="avatar" class="form-control">
                    </div>
                    <div class="d-grid">
                        <button class="btn btn-primary">Kaydet</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

</html>

Adım 6: Çalıştırın

Şimdi aşağıdaki komutları çalıştırarak uygulamayı başlatın:

$ php artisan co:ca
$ php artisan ro:ca
$ php artisan serve

Laravel'de Resim Yükleme

Sonuç:

İşte bu kadar! Bir Laravel uygulamasında resim yükleme işlemini başarıyla uyguladınız. Kullanıcılar artık resim yükleyebilir ve ihtiyacınıza göre bunları görüntüleyebilirsiniz.

Laravel'da Adım Adım Resim Yükleme Rehberi