Laravel 上傳/刪除圖片 | Upload and Delete Image
最後更新日期: 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修改。