バックエンド

【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ヘルパー』なしでつくるとこんな感じになります。

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

formタグで囲って、

formタグの中の、

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

をつけつつ、

inputタグ内で、

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

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

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

Sponsored link

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

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

で、フォームをクリックした時のリクエストの中に 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

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

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

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

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

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

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

Sponsored link

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

コメント

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

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

CAPTCHA


最近の記事

  1. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  3. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  4. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
  5. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
PAGE TOP