iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
1
Modern Web

30天成為Laravel萌新系列 第 29

30天成爲Laravel萌新(第28天) - 上傳檔案

  • 分享至 

  • xImage
  •  

Laravel要上傳檔案非常的簡單,今天就來簡單帶個範例吧!

建立檔案目錄連結

首先,現用Artisan建立目錄連結。

artisan storage:link

上面命令會建立storage/app/public目錄,並將目錄同樣綁定到public/storage。這讓於此目錄下的內容,可以透過http://localhost/storage/<FILE NAME>存取。在public目錄下的檔案,基本都可以直接透過瀏覽器存取。

上傳頁面

同樣以一個簡單的上傳頁面作為範例。先建立resources/views/images/upload.blade.php

@extends("base",['title'=>'上傳圖片'])

@section('title', '上傳圖片')

@section('body')
    <form action="{{route('image.upload')}}" method="post" enctype="multipart/form-data">
        @csrf

       <!--
       @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        -->

        <input name="file" type="file" accept="image/*" value=""/>
        <input name="" type="submit" value="上傳"/>
    </form>
@endsection

這次,再次偷渡點東西過來,所以先不看if ($errors->any())那段,基本與正常上傳頁面一樣,同樣的,form需要設定enctype="multipart/form-data"。另外,雖然預定上傳頁面與POST的的位置是同一個,但是還是加上action="{{route('image.upload')}}",隨後要設定路由名字。

routes/web.php

Route::get('/images/upload', function(){
    return view('images/upload');
});

Route::post('/images/upload', function(Request $request){
    // .........
})->name('image.upload');

簡單的回傳頁面來顯示。另外,處理的部份命名路由為image.upload

實現上傳功能

最後,實現上傳儲存檔案的功能。非常簡單,透過$request->file(<field>)->store('public)儲存就好,最後會回傳位於storage/資料夾下的位置,store(<PATH>)可以指定儲存位置。要公開檔案連結,所以設定為public,所以最後會得到路徑/public/<file>。沒有指定檔名的話,檔名會自動生成,非常方便,舉例來說,可能得到的最終結果是public/60i53CGGxuehOFZQMeZ4giZEzW8Wwz8Qd5bgbFrQ.jpeg

Route::post('/images/upload', function(Request $request){

    /*
    Validator::make($request->all(), [
        'file' => 'required|image',
    ])->validate();
    */

    if($request->hasFile('file')){
        $image = $request->file('file');
        $file_path = $image->store('public');
    }

    return redirect(Storage::url($file_path));
})->name('image.upload');

但是這個位置還不可用,還需要透過Storage::url()將位置轉換成可以給其他人存取的路徑,也就是在public/資料夾的路徑,所以得到的結果可能是/storage/60i53CGGxuehOFZQMeZ4giZEzW8Wwz8Qd5bgbFrQ.jpeg。最後,可以嘗試上傳看看,最後可能會導向到http://localhost/storage/60i53CGGxuehOFZQMeZ4giZEzW8Wwz8Qd5bgbFrQ.jpeg 。


上一篇
30天成爲Laravel萌新(第27天) - 本地化、多語言支援(Localization)
下一篇
30天成爲Laravel萌新(第29天) - 表單驗證
系列文
30天成為Laravel萌新32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言