Laravel

【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)】でできる事をわかりやすく(ざっくりと)まとめてみた【用語集も兼ねて】【初心者向け】

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

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

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

5. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

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

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

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

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

コメント

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

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

CAPTCHA


Sponsored link

関連記事

  1. Laravel

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

    とある不動産検索システムの案件で、物件ごとに、設備の情報(例え…

  2. Laravel

    【laravel】ダミー(テスト)データを作る方法 シーダー(seeder)とfactoryとfak…

    『PHPの現場』というポッドキャストの放送で、ひときわ印象に残…

  3. Laravel

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

    インターネット上で写真や情報をやりとりできるような『Webアプリ』…

  4. Laravel

    【Webアプリ実践記】JSすら怪しい37歳おっさんが独学でVue.js+Laravelでwebアプリ…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  5. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

Sponsored link

最近の記事

Sponsored link
  1. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して
  3. 検索システム

    新しいホテルを探すサービスをつくってみました【楽天トラベルAPI】【条件付】
  4. docker初心者向けdocker-composeからやったほうがいいかもよ

    ツール

    【Docker】初心者はdocker-composeから始めた方がいいかもしれな…
  5. MySQL

    検索システムのデータベースの作り方や考え方を8ステップで書き連ねてみる
PAGE TOP