Laravel 上傳/刪除圖片 | Upload and Delete Image

• 18 5 月, 2020
|
• Laravel, 文章
|
|
• No comments

最後更新日期: 2020-06-01

1. storage跟public做一個連結

php artisan storage:link

2. 安裝Intervention

composer require intervention/image

3. 基本的setup，設定好

config/app.php
         */
        Intervention\Image\ImageServiceProvider::class,

        /*
         * Application Service Providers...
        'Image' => Intervention\Image\Facades\Image::class

4.測試intervention 有沒有安裝成功

接下來我們簡單這次看看Intervention 是不是真的有安裝成功。我們在route/web.php 測試看看。然後我們在blade看看有沒有render出來。

use Intervention\Image\Facades\Image;

// usage inside a laravel route
Route::get('/', function()
{
    $img = Image::make('https://images.pexels.com/photos/4273439/pexels-photo-4273439.jpeg')->resize(300, 200); // 這邊可以隨便用網路上的image取代
    return $img->response('jpg');
});

5. 接下來寫我們的blade跟controller

首先現在blade裡面放一個簡單的input file

接下來我們可以來寫我們的controller， 首先要先驗證(Validation)。這邊可以看得你的需求來寫。我這邊是限定檔案類型，必須填寫，檔案最大大小。

再來$imagePath 存在storage/uploads 裡面, 第二個參數是disk space，所以這邊的disk 是public。

完成後我們用intervention 把尺寸，品質調整一下。成功之後就把image存起來。

再來把imagePath，image的路徑存在database裡面。就完成了

// blade.php

<form method="POST" action="{{ route('procurement-po-store') }}" enctype="multipart/form-data">

<label for="po_image" class="block text-sm leading-5 font-medium text-gray-700">
    表單上傳
    <input type="file" name="po_image">
</label>

public function store()
    {

        // Validation
        request()->validate([
            'site_id' => 'required',
            'progress' => 'required',
            'estimated_delivery_date' => 'required|date',
            'actual_delivery_date' => 'required|date',
            'po_image' => 'mimes:jpeg,jpg,png,gif|required|max:10000'
        ]);

        // Attach Image info
        $site_id = request('site_id');
        $imagePath = request('po_image')->store("uploads/{$site_id}", 'public');
        $image = Image::make(public_path("storage/{$imagePath}"))->resize(900, null, function ($constraint) {
            $constraint->aspectRatio();
        });
        $image->save(public_path("storage/{$imagePath}"), 60);

        $image->save();
        // Save Purchase Order Data
        // Attach User Data
        PurchaseOrder::create([
            'site_id' => request('site_id'),
            'progress' => request('progress'),
            'estimated_delivery_date' => request('estimated_delivery_date'),
            'actual_delivery_date' => request('actual_delivery_date'),
            'creator_id' => auth()->user()->id,
            'po_image' => $imagePath
        ]);
        // Session Message
        session()->flash('success', '採購單建立成功');
        // Redirect Route
        return redirect('procurement/dashboard');
    }

實際操作看看，我這邊原始檔案1.3mb。上傳後壓縮變150kb，然後目前是在storage的路徑。

透過 storage:link, 我們public目錄也有這個一饃一樣的圖片。你只要public刪掉，storage也會同步。storage裡面刪掉，public也會刪掉。

在blade這樣子打image就可以出來了

<img src="/storage/{{$purchase_order->po_image}}" alt="" class="w-full mt-4">

接下來我們來做delete的動作, 這邊我花比較多時間測試file path, 我一開始去storage path刪除檔案。但是沒有成功，最後原來要刪除public path。反正public 跟storage是有連結的所以，public 刪除後，storage也會一起刪除。

use Illuminate\Support\Facades\Storage;
public function remove_image(PurchaseOrder $purchase_order)
    {
        $file_path = $purchase_order->po_image ? "public/" . $purchase_order->po_image : "";
        if (Storage::exists($file_path)) {
            Storage::delete($file_path);
            $purchase_order->update([
                'po_image' => ''
            ]);
            session()->flash('success', '圖片已經刪除');
        } else {
            session()->flash('error', '圖片不存在');
        }
        return redirect()->back();
    }

這一次的教學就到這裡，這個刪除的feature不會很難，難在確定路徑。檔案該從public還是storage修改。

影片教學