相關系列文章：
01.在 windows 10 安裝 laravel 12 studentManagement環境與設定
02.laravel 12 route 路由
03.laravel 12 Blade Templates 網頁模版
04.laravel 12 Controller 控制器
05.Laravel 12 Migration 遷移-資料庫版本控制
06.Laravel 12 Model 資料庫中的資料表，並提供與資料庫互動的介面
07.laravel 資料庫資料填充工廠入門
08.laravel 12 Eloquent ORM-Query Builder
09.laravel 12 Eloquent ORM-Eloquent ORM
10.Laravel 12：Eloquent 必學技巧一次掌握(Scopes、Soft Deletes、CRUD)
11.Laravel 12 表單驗證教學
12.Laravel 12 圖片上傳與刪除記錄及文件
13.Laravel 12 Eloquent 關聯完整指南：從基礎到進階的全方位教學
Laravel 12 圖片上傳與刪除記錄及文件，共有兩個主題，分別是
1. 在 Laravel 12 中上傳與儲存圖片
2. 刪除記錄及圖片（從儲存設備中刪除文件）
1. 在 Laravel 12 中上傳與儲存圖片
(1).在資料表裡新增Image的欄位：
指令： php artisan make:migration AddImageToStudentsTable
在\database\migrations\xxxx_xx_xx_xxxxxx_add_image_to_students_table.php，
$table->string('Image')->nullable(true);
與 $table->dropColumn('Image');
<div class="mb-3">
<label for="Image" class="form-label">Image</label>
<input type="file" class="form-control" id="Image" name="Image" accept="image/*">
</div>
如下圖：
http://127.0.0.1:8000/student/add，可以看到 在\app\Http\Requests\StudentAddRequest.php 新增 'Image' => 'nullable|image|mimes:png,jpg,gif|max:2048',
如下圖：
在\app\Http\Controllers\StudentController.php 新增 $imagePath = null;
if ($request->hasFile('Image')) {
$imagePath = $request->file('Image')->store('photos','public');
}與
與
$student->Image = $imagePath;
如下圖：
在\resources\views\students\add.blade.php 編輯如下：enctype="multipart/form-data"
如下圖：在 127.0.0.1:8000/student/add 填寫資料，並按下Submit此時，會在/storage/app/public/photos 看到，如下圖： 此時，下指令：php artisan storage:link 
這會讓 public/storage 對應到 storage/app/public在 127.0.0.1:8080/phpmyadmin，可看到：
在/resources/views/students/index.blade.php ，添加 <td>
@if ($student->Image)
<img src="{{ asset('storage/' . $student->Image) }}" width="150">
@endif
</td>
在 127.0.0.1:8000/student的最盡頭，可以看到縮圖 (2)若要能進行更新圖片
在/resources/views/students/edit.blade.php ，添加
enctype="multipart/form-data"
與
<div class="mb-3">
@if ($student->Image)
<img src="{{ asset('storage/' . $student->Image) }}" width="150">
@endif
<label for="image" class="form-label">Image</label>
<input type="file" class="form-control" id="Image" name="Image" accept="Image/*">
</div>
如下圖：
在\app\Http\Controllers\StudentController.php 新增 $imagePath = null;
if ($request->hasFile('Image')) {
$imagePath = $request->file('Image')->store('photos', 'public');
}
與
$student->Image = $imagePath;
如下圖：
http://127.0.0.1:8000/student/add，可以看到，按下Update
可以看到，可以編修時，更新照片
2. 刪除記錄及圖片（從儲存設備中刪除文件）
注意事項：
use Illuminate\Support\Facades\Storage;
在\app\Http\Controllers\StudentController.php 變更編輯如下：
$student = Student::findOrFail($id);
if ($student->Image) {
Storage::disk('public')->delete($student->Image);
}
$student->delete();
return redirect('student');
如下圖：
在 127.0.0.1:8000/student的最盡頭，可以看到縮圖。按下Delete
就可以看到，在/public/storage/photos/ 的照片少一張
資料來源：
1.Laravel 12 Image Upload Tutorial | How to Upload & Store Images in Laravel
2.Laravel 12 – Delete Record with Image | Remove File from Storage
沒有留言:
張貼留言