Tutorial Laravel Upload dengan Package ImageUp

Laravel Image Manipulation

Dalam Build aplikasi kemungkinan kita akan menemukan masalah dalam mengelola folder foto, ukuran dan tata letaknya. Nah kali ini saya akan mengupas bagaimana cara Upload menambahkan fitur unggah gambar dan ubah ukuran di sebagian besar aplikasi yang saya buat. Laravel sudah dikemas dengan pengunggahan file yang sangat mudah, tetapi banyak hal menjadi rumit dan setelah itu kita akan menemukan masalah ketika kita mau memanipulasi gambar yang diunggah. Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat mengunggah dan mengubah ukuran proses gambar menjadi halus.

Aplikasi yang saya buat biasanya memiliki semacam pengontrol apakah request file untuk diunggah. Setelah mengunggah, kita perlu mengubah ukurannya dan kemudian membersihkan file lama dan memperbarui database dengan jalur gambar yang baru diunggah. Solusi sederhana akan menjadi seperti ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;

class UserAvatarController extends Controller
{
    public function store(Request $request)
    {
        // validate the image
        $this->validate($request, [
            'avatar' => 'required|image|max:2000'
        ]);

        // get the user
        $user = auth()->user();

        // upload and resize using Intervention Image
        $filename = 'uploads/avatar-'.$user->id.'.jpg';

        Image::make($request->file('avatar'))
            ->fit(200, 200)
            ->save($filename, 80);

        // update model
        $user = auth()->user();
        $oldAvatar = $user->avatar;
        $user->update(['avatar' => $filename]);

        // delete old image
        unlink($oldAvatar);

        return [
            'avatar' => asset($filename)
        ];
    }
}

Sekarang kita bisa melakukan yang lebih baik. Kita akan menggunakan qcod/laravel-imageup package untuk membuat proses ini santuy.

Install Package

Anda dapat menginstal Package melalui composer :

composer require qcod/laravel-imageup

Package akan secara otomatis mendaftar sendiri. Jika Anda perlu mendaftarkannya secara manual, Anda dapat menambahkannya di array penyedia config/app.php:

QCod\ImageUp\ImageUpServiceProvider::class

Anda dapat mempublikasikan file konfigurasi dengan:

php artisan vendor:publish --provider="QCod\ImageUp\ImageUpServiceProvider" --tag="config"

Ini akan membuat config / imageup.php dengan semua pengaturan yang dapat Anda sesuaikan.

Konfigurasi

Sekarang kami memiliki package, mari kita kaitkan dengan model Pengguna kami untuk menangani fungsionalitas pengunggahan avatar.

use QCod\ImageUp\HasImageUploads;

class User extends Authenticatable
{
    use Notifiable, HasImageUploads;

    /**
     * All the images fields for model
     *
     * @var array
     */
    protected static $imageFields = [
        'avatar' => [
            'placeholder' => 'https://api.adorable.io/avatars/160',
            'width' => 160,
            'height' => 160,
            'resize_image_quality' => 90,
            'crop' => true
        ]
    ];

    //...
}

Itu saja, untuk memberi Anda fungsionalitas mengunggah. Sekarang di UserController kami, Anda dapat membuat permintaan dengan file gambar untuk mengunggah dan mengubah ukuran dan melakukan semua hal yang telah kami lakukan sebelumnya secara otomatis hanya dalam 2 baris kode.

public function store(Request $request)
{
    $user = auth()->user();
    $user->update($request->all());

    return $user;
}

Segera setelah Model::saved() acara dipecat ini akan memeriksa file apa pun yang bernama avatar dalam $ request. Jika menemukannya, itu akan secara otomatis mengunggah dan memotongnya berdasarkan konfigurasi yang kami berikan dalam definisi bidang $modelFields Model pengguna.

Jika Anda melihat ke array $ imageFields dari model Pengguna, Anda dapat melihat bahwa kami telah menyediakan ['width' => 160, 'height' => 160, 'crop' => true]. Yang memberitahu untuk memotong gambar pada ukuran itu. Jika Anda menghilangkan gambar opsi pangkas akan diubah ukurannya dengan menjaga rasio aspek gambar.

Mengunggah dan Mengubah Ukuran Gambar secara Manual

Itu bagus untuk mengunggah otomatis dan dalam sebagian besar kasus itu sudah cukup. Tapi bayangkan Anda perlu mengunggah gambar dan memotongnya secara manual. File gambar dapat sudah tersedia di sistem file server atau berasal dari permintaan pengguna.

Pastikan Anda telah menonaktifkan unggahan otomatis dengan menyetel $ autoUploadImages = false; pada model atau dengan memanggil $ model-> setImagesField (['avatar' => ['auto_upload' => false]); jika tidak, Anda tidak akan melihat unggahan manual Anda, karena itu akan ditimpa oleh unggahan otomatis saat model disimpan.

Mari kita lihat betapa mudahnya mengunggah dan mengubah ukuran gambar secara manual.

$user = User::findOrFail($id);

$user->uploadImage(request()->file('avatar'), 'avatar');
// or
$user->uploadImage(request()->file('avatar'));

Unggah gambar untuk bidang $field diberikan, jika $field nol, itu akan mengunggah ke opsi gambar pertama yang ditentukan pada larik Model imageFields.

Ubah ukuran Gambar

Jika Anda sudah memiliki gambar, Anda dapat memanggil metode ini untuk mengubah ukurannya dengan opsi yang sama yang kami gunakan untuk bidang gambar.

$user = User::findOrFail($id);

// resize image, it will give you resized image, you need to save it
$imageFile = '/images/some-big-image.jpg';
$image = $user->resizeImage($imageFile, [ 'width' => 120, 'crop' => true ]);

// or you can use uploaded file
$imageFile = request()->file('avatar');
$image = $user->resizeImage($imageFile, [ 'width' => 120, 'crop' => true ]);

Pangkas Gambar

Anda dapat menggunakan metode pemangkasan ini ($ x, $ y) untuk mengatur koordinat pemangkasan x dan y. Ini akan sangat berguna jika Anda mendapatkan koordinat dari semacam perpustakaan pemangkasan gambar front-end seperti CropperJs.

$user = User::findOrFail($id);

// uploaded file from request
$imageFile = request()->file('avatar');

// coordinates from request
$coords = request()->only(['crop_x', 'crop_y']);

// resizing will give you intervention image back
$image = $user->cropTo($coords)
    ->resizeImage($imageFile, [ 'width' => 120, 'crop' => true ]);

// or you can do upload and resize like this, it will override field options crop setting
$user->cropTo($coords)
    ->uploadImage(request()->file('cover'), 'avatar');

Seperti yang Anda lihat Ini memberi Anda banyak penyesuaian dan Anda dapat memanipulasi gambar Anda dengan cara apa pun yang Anda inginkan, Terima kasih kepada pustaka Gambar Intervensi yang mengagumkan yang digunakan di bawah tenda.

Opsi penyesuaian ImageUp Laravel

Laravel ImageUp memungkinkan Anda untuk menyesuaikan cara pengunggahan dan pengubahan ukuran akan ditangani dari opsi bidang yang ditentukan, berikut adalah hal-hal yang dapat Anda sesuaikan:

<?php
namespace App;

use QCod\ImageUp\HasImageUploads;
use Illuminate\Database\Eloquent\Model;

class User extends Model {

    use HasImageUploads;

    // which disk to use for upload, can be override by field options
    protected $imagesUploadDisk = 'local';

    // path in disk to use for upload, can be override by field options
    protected $imagesUploadPath = 'uploads';

    // auto upload allowed
    protected $autoUploadImages = true;

    // all the images fields for model
    protected static $imageFields = [
        'avatar' => [
            // width to resize image after upload
            'width' => 200,

            // height to resize image after upload
            'height' => 100,

            // set true to crop image with the given width/height and you can also pass arr [x,y] coordinate for crop.
            'crop' => true,

            // what disk you want to upload, default config('imageup.upload_disk')
            'disk' => 'public',

            // a folder path on the above disk, default config('imageup.upload_directory')
            'path' => 'avatars',

            // placeholder image if image field is empty
            'placeholder' => '/images/avatar-placeholder.svg',

            // validation rules when uploading image
            'rules' => 'image|max:2000',

            // override global auto upload setting coming from config('imageup.auto_upload_images')
            'auto_upload' => false,

            // if request file is don't have same name, default will be the field name
            'file_input' => 'photo'
        ],
        'cover' => [
            //...
        ]
    ];
}

Kesimpulan

Meskipun saya telah mencoba untuk menutupi sebagian besar fitur untuk qcod/laravel-imageup tetapi jika Kamu memerlukan bantuan dengan ini jangan lupa periksa Dokumentasi Github untuk ini. Saya harap ini membantu Anda. Jika Anda menemukan masalah dalam paket, silakan buka masalah, saya akan segera memperbaikinya. Selamat coding 😎