バックエンド

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

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

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

アオキ
うまい方法ないもんかなぁ

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

Laravel 5.5 で実施しています。

Sponsored link

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はコントローラー側で扱うために必要

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

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

Sponsored link

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

Sponsored link

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

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

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

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

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

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

1. 【Laravel】マルチログイン対応ECサイトの講座をリリースしました【Udemy】

2. 【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】

3. 【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【techpit】

4. 『Carbon』でよく使うパターンをまとめてみた【Laravel向け】

5. 【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【用語集も兼ねて】【初心者向け】

6. 【Laravel】フロントエンドをわかりやすくまとめてみた【初心者向け】

7. 【PHP】【Laravel】CSVエクスポートの方法〜5つのポイント〜

8. 【PHP】CSVインポートの方法〜大量データもバルクインサートでバッチリ!〜【laravel】

9. 【Laravel】ダミー(テスト)データを作る方法 シーダー(seeder)とfactoryとfaker【初心者向け】

10. 【Laravel】Webアプリ環境構築の仕方【Vue.js】【初心者向け】

11. 【Laravel】と【Vue.js】のサンプル動画を見ながらさらりと解説してみる

12. 【Laravel】マルチログイン(ユーザーと管理者など)機能を設定してみた【体験談】

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

14. 【Laravel】多対多テーブルを複数つくる方法【ちょっとコツがいります】

15. 【Laravel】【Slack】に通知する方法をまとめてみた【自作ファサード】

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

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  2. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  3. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. データベース

    MySQLの講座をリリースしました
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock