隨手扎

30天成爲Laravel萌新（第28天） - 上傳檔案

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 。

comments powered by Disqus