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

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 を使ってループさせればあっさりフォトギャラリーがつくれそうです。

Laravel でフォトギャラリー 画像アップロード機能をつくってみて

『Laravel』は後発でたくさんの機能を盛り込んでいる分、

• php 自体の使い方
• Symphonyのコード
• Laravelのコード
• MVC自体の理解

といろんな知識を総動員してつくれるようになるまで、結構なハードルがあるなぁと思いつつ、
つくれるようになるとそれこそWeb系ならなんでもつくれるんじゃないかと思える柔軟性があるなぁと感じます。

アオキ

これからもWeb系ならしばらくは『Laravel』を軸にもりもりシステム作っていきたいなと思っております。

PHPフレームワーク Laravel Webアプリケーション開発 バージョン8.x対応

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

『Laravel』ではこんな記事も読まれています。

アオキ

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m