學程式的道路上.....我跌跌撞撞的過程
文章為我平時發生錯誤的解決方法
因為擔心下次碰到時會忘記
所以就將他筆記下來了
如果有大大發現我的敘述錯誤
或者有哪些更有效率的方法
也請大大們不吝嗇的提供指教
謝謝~
上一篇完成「上傳圖片+顯示圖片」的功能後
接下來這一篇文將要來記錄刪除資料庫圖片 & 刪除目錄底下的圖片檔
因為在上傳圖片時，除了會將自己的圖片記錄在資料庫外，也會額外的將該圖片儲存起來
正常不做任何設定時，圖片會儲存在專案底下的Public目錄下，但是若考慮到後續在刪除圖片時...
就必須將圖片指定儲存到storage的目錄底下，並請使用Laravel提供的storage函式對圖片做刪除。
回顧一下上一篇在做儲存時，是將圖片儲放在storage底下的app目錄
所以就可以準備開始做刪除的流程了
1.首先我做了一個可以顯示目前資料庫所有圖片的頁面
<showPhoto.blade.php>
@extends('information.information')
@section('showInfo')
<p>I'm in myPhoto.blade.php</p>
<div class="w3-center" style="position: relative;">
<form method="POST" name="showPhoto" action="{{ url('/deletePhoto') }}" class="w3-container" id="showInfo" enctype="multipart/form-data" onsubmit="return verify()">
{{ csrf_field() }}
<input type="hidden" name="_method" value="DELETE">
<div style="min-height: 500px; min-width: 500px; ">
<div class="w3-left" >
@if(isset($photos))
@foreach($photos as $photo)
<img src="{{ url('../storage/app/' . $photo->path) }}" alt="無法顯示圖片" width="300px" height="200px" style="border: 2px solid; border-radius: 5px; ">
<input type="checkbox" name="check_array[]" value="{{ $photo->id }}" class='w3-center'>
@endforeach
@endif
</div>
</div>
<button class="w3-btn w3-white w3-border w3-round-large w3-right" style="margin-left: 30px;">刪除</button>
</form>
</div>
@endsection
在這個子頁面，指向了view底下information資料夾information.php這個主視圖
並且我在checkbox值中放了Photo資料表裡面所有資料的id
藉由這個方式將圖片id傳遞至後端，準備做刪除的功能
這邊可以注意一下藍色的字，Laravel中提供了刪除的方式
因為HTML表單沒有提供DELETE的動作，所以 在 HTML 表單中被呼叫的時候，你將需要在表單中增加隱藏的 _method 欄位
這樣才可以在路由中使用
可以參考Laravel的「HTTP路由」這篇文章中的表單方法欺騙。
2.設定路由
Route::get('/showPhoto', ['middleware' => 'auth', 'uses' => 'MyPhotoController@showPhoto']);
由Route::get()這邊顯示目前於資料庫中所有的圖片
3. 撰寫controller ，顯示資料庫的所有圖片
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;
use auth;
use Storage;
use App\photos;
class MyPhotoController extends Controller
{
public function showPhoto()
{
#呼叫登入者的資訊，用變數user儲存
$user = Auth::user();
#建立一個新物建
$photo = DB::table('photos')->where('user_id', '=', $user->id)->get();
$data = ['users' => $user, 'photos' => $photo];
return view('MyPhoto.showPhoto', $data);
}
}
首先要先到資料庫撈到所有的圖片，因為圖片是綁定登入者的ID，所以需要使用到$user = Auth::user();
紅色區塊為找資料的SQL與法
最後回傳至前端頁面，這樣就完成了顯示全部的圖片了。
4.設定路由
接著開始要加入刪除的功能的
Route::delete('/deletePhoto', ['middleware' => 'auth', 'uses' => 'MyPhotoController@deletePhoto']);
Laravel提供的delete函式，可以更有效率的達到刪除的功能
5.撰寫controller ，刪除資料庫的圖片+硬碟目錄中的圖檔
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;
use auth;
use Storage;
use App\photos;
class MyPhotoController extends Controller
{
public function showPhoto()
{
#呼叫登入者的資訊，用變數user儲存
$user = Auth::user();
#建立一個新物建
$photo = DB::table('photos')->where('user_id', '=', $user->id)->get();
$data = ['users' => $user, 'photos' => $photo];
return view('MyPhoto.showPhoto', $data);
}
public function deletePhoto(Request $request)
{
$photo_info = $request->input('check_array');
#刪除資料庫中的「資料」
foreach ($photo_info as $my_check_photo) {
$photos = DB::table('photos')->select('path')->where('id', '=', $my_check_photo)->get();
Storage::delete($photos[0]->path);
DB::table('photos')->where('id', '=', $my_check_photo)->delete();
}
/*
必須要redirect回到showPhoto()的function，這樣才能重新取照片加上顯示
如果不懂可將下方住解去掉，並查看網址並非導向showPhoto，而是導向deletePhoto
*/
#return view(MyPhoto.myPhoto);
return redirect()->action('MyPhotoController@showPhoto');
}
}
增加了deletePhoto的function
透過前端view的checkbox傳來的ID，尋找資料庫的資料
並且由photos變數儲存 (photos是一個二為陣列)
接這會用到Laravel提供的函式 storage
storage函式里有個delete方法可以使用
藍色反白處可以提供參考
再來紫色反白處，為下SQL語法，刪除資料表中的資料
然後redirect回到指定的頁面
這樣就完成了簡單的刪除圖片的功能
如果我的筆記有任何地方需要修改，請大神們不吝嗇的給予指教
留言列表
