آپلود عکس در لاراول با کتابخانه Laravel Intervention + ساخت پروژه تغییر سایز تصاویر

سلام

آپلود عکس در لاراول بسیار ساده است و نیازی به کتابخانه ندارد، ولی تا الان که من این پست رو برای شما دارم میزارم کتابخانه Intervention بیش از ۱ میلیون ۸۰۰ هزار بار دانلود شده، که واقعا یک کتابخانه بی نظیر برای آپلود تصاویر هست، در ادامه همراه بپرسم باشید تا این کتابخانه را در لاراول اضافه کنیم.

کتابخانه Intervention لاراول

توضیح ساده

اولین قدم نصب کتابخانه هست، برای نصب کتابخانه کافیست دستور زیر را در CMD یا ترمینال وارد کنید:

composer require intervention/image

۱	composer require intervention/image

حالا تو کنترلر مربوطه باید کتابخونه رو USE کنید که برای اینکار کافیه کد زیر رو به کنترلر مربوطه اضافه کنید:

use Intervention\Image\ImageManagerStatic as Image;

۱	use Intervention\Image\ImageManagerStatic as Image;

تمام شد! حالا به صورت زیر میتونید ازش استفاده کنید:

if($request->hasFile('banner')) {
    $image = $request->file('banner');
    $filename = $image->getClientOriginalName();
    $image_resize = Image::make($image->getRealPath());
    $image_resize->save(public_path('images/' .$filename));
}

if($request->hasFile('banner')) {

$image = $request->file('banner');

$filename = $image->getClientOriginalName();

$image_resize = Image::make($image->getRealPath());

$image_resize->save(public_path('images/' .$filename));

}

کد خیلی ساده است، تو خط اول اسم input که برای آپلود گذاشتم، اسمش رو banner گذاشتم و اینجا گفتم اگر فایلی توسط کاربر انتخاب شده بود، بیا و تو پوشه iamges ذخیره کن

حالا بریم تا به صورت تخصصی تر یک مثال عملی تر از افزونه بزنیم.

میخوایم یک پروژه آپلود تصویر در لاراول بسازیم که پس از آپلود سایز تصویر رو هم تغییر بدیم.

۱- ایجاد پروژه جدید در لاراول

اول یک پروژه جدید تو لاراول ایجاد میکنیم.

composer create-project --prefer-dist laravel/laravel laravel-demo

۱	composer create-project --prefer-dist laravel/laravel laravel-demo

۲- اضافه کردن کتابخانه Intervention Image

دومین قدم اضافه کردن کتابخانه Intervention Image در پروژه خودمون هست.

composer require intervention/image

۱	composer require intervention/image

۳- ثبت پکیج در config/app.php

خیلی بهتره که بیایم کتابخونه رو به صورت دستی اضافه کنیم، برای این کار در پوشه config فایل app.php رو باز کنید، در قسمت providers کد زیر رو اضافه کنید:

مطلب پیشنهادی: آموزش استفاده از تصاویر متحرک(GIF) در B4A

 Intervention\Image\ImageServiceProvider::class

۱	Intervention\Image\ImageServiceProvider::class

و همچینن در قسمت aliases کد زیر رو اضافه کنید:

'Image' => 'Intervention\Image\Facades\Image'

۱	'Image' => 'Intervention\Image\Facades\Image'

که در کل اینطوری میشه:

return [
	......
	$providers => [
		......,
		 Intervention\Image\ImageServiceProvider::class
	],
	$aliases => [
		......,
		'Image' => 'Intervention\Image\Facades\Image'
	]
]

۱۰

۱۱

return [

......

$providers => [

......,

Intervention\Image\ImageServiceProvider::class

$aliases => [

......,

'Image' => 'Intervention\Image\Facades\Image'

]

۴- ساخت Controller

یه کنترلر میخوایم بسازیم که به یک view متصل کنیم، که برای نمایش فرم آپلود به کاربر و عملیات آپلود و تغییر سایز تصاویر میخوایم ازش استفاده کنیم، برای این کار یک کنترلر با دستور زیر میسازیم:

php artisan make:controller ResizeController

۱	php artisan make:controller ResizeController

خب حالا وارد کنترلری که ساختیم میشیم؛ برای این کار وارد مسیر app/Http/Controllers/ResizeController.php بشید و کدهای زیر رو قرار بدید:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Image;
class ResizeController extends Controller
{
    
    public function index()
    {
    	return view('welcome');
    }
    public function resizeImage(Request $request)
    {
	    $this->validate($request, [
            'file' => 'required|image|mimes:jpg,jpeg,png,gif,svg|max:2048',
        ]);
        $image = $request->file('file');
        $input['file'] = time().'.'.$image->getClientOriginalExtension();
        
        $destinationPath = public_path('/thumbnail');
        $imgFile = Image::make($image->getRealPath());
        $imgFile->resize(150, 150, function ($constraint) {
		    $constraint->aspectRatio();
		})->save($destinationPath.'/'.$input['file']);
        $destinationPath = public_path('/uploads');
        $image->move($destinationPath, $input['file']);
        return back()
        	->with('success','Image has successfully uploaded.')
        	->with('fileName',$input['file']);
    }
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Image;

class ResizeController extends Controller

{

public function index()

{

return view('welcome');

}

public function resizeImage(Request $request)

{

$this->validate($request, [

'file' => 'required|image|mimes:jpg,jpeg,png,gif,svg|max:2048',

]);

$image = $request->file('file');

$input['file'] = time().'.'.$image->getClientOriginalExtension();

$destinationPath = public_path('/thumbnail');

$imgFile = Image::make($image->getRealPath());

$imgFile->resize(۱۵۰, ۱۵۰, function ($constraint) {

$constraint->aspectRatio();

})->save($destinationPath.'/'.$input['file']);

$destinationPath = public_path('/uploads');

$image->move($destinationPath, $input['file']);

return back()

->with('success','Image has successfully uploaded.')

->with('fileName',$input['file']);

}

مطلب پیشنهادی: روش های تعریف متغیر در b4a

۵- ساخت Route

حالا باید یک روت بسازیم که دسترسی به ویو و کنترلر داشته باشیم، برای ساخت روت جدید به مسیر routes/web.php برید و کدهای زیر رو قرار بدید:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ResizeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/file-resize', [ResizeController::class, 'index']);
Route::post('/resize-file', [ResizeController::class, 'resizeImage'])->name('resizeImage');

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\ResizeController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('/file-resize', [ResizeController::class, 'index']);

Route::post('/resize-file', [ResizeController::class, 'resizeImage'])->name('resizeImage');

۶- ساخت فایل View Blade

خب رسیدیم به آخرین مرحله که باید یک فایل ویو بسازیم و فرم آپلود رو داخلش نمایش بدیم، برای این کار به مسیر resources/views/welcome.blade.php برید و کدهای زیر رو جایگزین کدهای موجود کنید:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Laravel Image Resize Example</title>
</head>
<body>
    <div class="container mt-5" style="max-width: 550px">
        <h2 class="mb-5">Laravel Image Resize Example</h2>     
        <form action="{{route('resizeImage')}}" method="post" enctype="multipart/form-data">
            @csrf
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <strong>{{ $message }}</strong>
            </div>

            <div class="col-md-12 mb-3">
                <strong>Grayscale Image:</strong><br/>
                <img src="/uploads/{{ Session::get('fileName') }}" width="550px" />
            </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="custom-file">
                <input type="file" name="file" class="custom-file-input" id="chooseFile">
                <label class="custom-file-label" for="chooseFile">Select file</label>
            </div>
            <button type="submit" name="submit" class="btn btn-outline-danger btn-block mt-4">
                Upload
            </button>
        </form>
    </div>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

<!DOCTYPE html>

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

<head>

<title>Laravel Image Resize Example</title>

</head>

<body>

<h2 class="mb-5">Laravel Image Resize Example</h2>

@csrf

@if ($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

<strong>Grayscale Image:</strong><br/>

</div>

@endif

@if (count($errors) > ۰)

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

<label class="custom-file-label" for="chooseFile">Select file</label>

</div>

Upload

</button>

</form>

</div>

</body>

</html>

مطلب پیشنهادی: آموزش نرم افزار AIDE - قسمت دوم(آشنایی با محیط برنامه)

۷- اجرای پروژه

کار تموم شد، الان دیگه باید از پروژه خروجی بگیریم تا خروجی کارمون رو ببینیم؛ برای این کار:

Run Laravel Project

۱	Run Laravel Project

که آدرس دیدن پروژه میشه:

http://127.0.0.1:8000/file-resize

۱	http://۱۲۷.۰.۰.۱:۸۰۰۰/file-resize

از پیش نمایش کار لذت ببرید 🙂

آپلود تصویر در لاراول بسیار ساده است، اول سعی کردم که خیلی آسون مقدمات کار رو بهتون بگم؛ بعدش با یک پروژه ی کامل بهتون بگم. در صورتی که جایی رو متوجه نشدید؛ نگران نباشید سوالتون رو میتونید هم تو سایت بپرسید و هم به صورت آنلاین از طریق بخش گفتگوی آنلاین با کارشناسان بپرسم، مطرح کنید.

موفق باشید.