【Laravel】フォトギャラリーを作るための画像アップロード方法【php】

ホーム
バックエンド
【Laravel】フォトギャラリーを作るための画像アップロード方法【php】

バックエンド

2019.03.17

【Laravel】フォトギャラリーを作るための画像アップロード方法【php】

とある不動産検索システムの案件で、

1物件あたり画像を10枚くらいアップロードする必要がありまして、

アオキ

うまい方法ないもんかなぁ

と思いググっていると、よさげなYoutube動画があったので、見て真似ることにしました。

Laravel 5.5 で実施しています。

Laravel でフォトギャラリー画像アップロードする方法

その動画がこちら。

『Learn How To Create Photo Gallery Using Laravel 5 | Eduonix』

という動画で、その名の通り、

『Laravel 5 (5.4) を使ってフォトギャラリーをつくる方法』という内容です。

トータル1時間26分という長時間な映像で、

しかも全編英語なので、

アオキ

頭から全部見るとさすがに途中で寝ちゃうよね

と思い、かいつまんで画像アップロードの箇所だけ抜粋して見つつ、

オリジナルで組んでみることにしました。

Laravel でフォトギャラリー画像アップロードビュー側

動画の方では、『Formヘルパー』なるものを使っているのですが、
『Formヘルパー』なしでつくるとこんな感じになります。

肝心なところだけ抜粋しています。

//resouces/views/create.blade.php

<form method="post" action="{{ route('store') }}" enctype="multipart/form-data">

    画像(外観)
    <input type="file" name="image_exterior">

<input type="hidden" name="_token" value="{{csrf_token()}}">

<input type="submit" value="新規登録" class="button is-primary">

</fom>

formタグで囲って、

formタグの中の、

メソッドはPOST
アクションは飛び先(route.phpで指定)
enctypeはおまじない

をつけつつ、

inputタグ内で、

typeはファイル
nameはコントローラー側で扱うために必要

といった情報を書いておきます。

続いてコントローラー側。

Laravel でフォトギャラリー画像アップロードコントローラー側

// HomeController.php

    public function store(Request $request)
    {
        
    $property = new Property();

    if (!empty($request->image_exterior)){

    //get filename 
    $filenameWithExt = $request->file('image_exterior')->getClientOriginalName();
    
    //get just the filename
    $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
    
    //get extension
    $extension = $request->file('image_exterior')->getClientOriginalExtension();

    // create new filename
    $filenameToStore = $filename.'_'.time().'.'.$extension;

    //upload image
    $path = $request->file('image_exterior')->storeAs('public/image', $filenameToStore);

    //save request
    $property->save();

ここはほぼ動画のままなのですが(動画だと38分くらいから)、

if (!empty($request->image_exterior))

で、フォームをクリックした時のリクエストの中に image_exteriorがあるかどうかをチェックします。

アオキ

ビックリマークempty なので、「空じゃなかったら」という判定になります。

あとはコメントの、

get filename の箇所でファイル名を取得して、
get just the filename で拡張子を外したファイル名だけを取得して、
get extensionの箇所で拡張子を取得して、
create new filenameの箇所で、ファイル名 + 時間 + 拡張子というファイル名を作って
upload image の箇所で、ストレージ内に画像を保存しつつ、
save requestの箇所で、フォーム内の他の要素も保存しています。

わざわざ時間を足しているのは、まったく同じファイル名が保存された時の対策用。

全く同じファイル名だと、前のファイルを上書きしちゃうリスクがあるので、ファイル名が同じでも、別物として扱いたいんですよね。

よくよく調べると、
getClientOriginalName() や getClientOriginalExtension() というメソッドは、
『Laravel』が使っているSymphonyというフレームワークで使われている様です。

他にも、

getFilename()・・一時的な名前取得
getRealPath()・・ファイルパスを取得
getClientSize()・・ファイルサイズを取得
getClientMimeType()・・mimeタイプを取得

などもあるようです。

また、
storeAsというメソッドを使うと名前指定ができて、storeだとファイル名が自動作成されます。

php artisan storage:link

というおまじないをうっておくことで、
ストレージに保存したファイルを外からも(ブラウザでURLをたたくことで)見れる様になります。

Laravel でフォトギャラリー画像アップロードサービスにうつしてみる

一つの画像アップロードならいいのですが、

今回は10枚アップロード、しかもフォームはそれぞれ作成ということで、

アオキ

コントローラーに書いた内容を10回書くのはさすがにしんどい・・

となったので、

サービスクラスを作ってそこから読み込ませることにしました。

app/Services/SaveImagesServices.php

というファイルをつくって、中身はこんな感じで。

// app/Services/SaveImagesServices.php

<?php

namespace App\Services;

use Illuminate\Http\Request;

class SaveImagesServices
{

    public static function saveImages($request, $string){

    //get filename 
    $filenameWithExt = $request->file($string)->getClientOriginalName();
    
    //get just the filenmae
    $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
    
    //get extension
    $extension = $request->file($string)->getClientOriginalExtension();

    // create new filename
    $filenameToStore = $filename.'_'.time().'.'.$extension;

    //upload image
    $path = $request->file($string)->storeAs('public/image', $filenameToStore);

    return $filenameToStore;

    }

}

namespace(名前空間)でファイルの場所を指定して、
フォームからのリクエストを受け取るのでRequestをuseしておいて、

saveImagesメソッドの引数で、$request と文字(フォームのinputタグのnameの箇所)をとるようにして。

そうするとコントローラー側はこれだけのコード量で良くなりました。

// HomeController.php

use App\Services\SaveImagesServices;

// 抜粋

    if (!empty($request->image_exterior)){
        $image_exterior = SaveImagesServices::saveImages($request, 'image_exterior');
        $property->image_exterior = $image_exterior;
    }

アオキ

めっさスッキリするやーん。

あとはビュー側で @foreach を使ってループさせればあっさりフォトギャラリーがつくれそうです。