画像アップロード機能を投稿フォームにつける【初心者のLaravel入門講座】

Laravel 入門講座
スポンサーリンク

Laravelで投稿フォームに画像のアップロード機能を付ける方法を解説していきますね。

画像を保存するために、storeAs と getClientOriginalNameを使っていきます。

*バージョンはLaravel8を使っています。

スポンサーリンク

画像アップロード機能を投稿フォームにつける【初心者のLaravel入門講座】

手順は次のとおりです。

  1. 画像のパスをいれるカラムをテーブルに作成する
  2. フォームの中に画像をアップロード機能を付ける
  3. シンボリックリンクを貼る
  4. コントローラーに画像保存処理を記述する
  5. 投稿テストをする
  6. 表示テストをする

①画像のパスをいれるカラムをテーブルに作成する

マイグレーションファイルに、画像のパスをいれるカラムを作っておきましょう。

前後の部分もあわせると、このような感じに作ります。

②フォームの中に画像をアップロード機能を付ける

フォームの中に画像をアップロードする機能を付けます。

ブラウザで表示させると、このようなファイル選択ボタンができています。

③シンボリックリンクを貼る

次に、こちらのコマンドでシンボリックリンクを作成します。

シンボリックリンクとは、ショートカットのようなものです。

コマンド実行後、publicフォルダ内にstorageフォルダへのリンクが貼られます。

 

なぜシンボリックリンクが必要なの?

シンボリックリンクはわかりにくいのですが、Laravelで画像を保存するうえで、わりと重要です。

デフォルトでは、画像はstorageフォルダ内に保存されます。

ですがLaravelのプロジェクトをWeb上に公開した時は、ユーザーはpublicフォルダのファイルにしかアクセスできません。

つまり、storageフォルダ内の画像がユーザーに表示されなくなってしまうのです。

シンボリックリンクを貼ることでstorageフォルダとpublicフォルダをつなげられ、この問題を回避できます。

④コントローラーに画像保存処理を記述する

最後に、コントローラーに画像を保存するコードを記述していきましょう。

画像ファイルのINPUTタグのname属性が【image】であるとします。

<input id=”image” type=”file” name=”image“>

コントローラーには、下記のように記述します。

画像の保存に関する記述は、次のように入れました。

        if(request(‘image’)){
            $filename=request()->file(‘image’)->getClientOriginalName();
            $inputs[‘image’]=request(‘image’)->storeAs(‘保存場所’, $filename);
        }

$filenameで、ファイル名を指定しています。

元々のファイル名でファイルを保存するには、getClientOriginalNameを使います。

保存するために、storeAsを使用しています。

⑤投稿テストをする

それでは、実際にフォームに画像を入れて投稿をしてみます。

フォームを送信した後、データベースには次のように保存されました。

⑥表示テストをする

最後に、保存された画像ファイルをimg srcタグに埋め込み、ブラウザに表示してみます。

bladeファイルには、次のように記述しました。

ブラウザには、下記のように表示されました。

さいごに

無事に画像が表示されましたか?

画像表示は、ちょっとしたことで、うまくいかなかったりします(←経験則)

もしうまくいかなかった場合は、下記の点をチェックしてください。

  • ローカルフォルダをチェック:フォルダにちゃんとファイルが保存されているか
  • ブラウザのソースコードをチェック:ブラウザのパスは正しく入っているか

必要に応じて、保存場所やパスの指定を変えてくださいね。

Laravel 入門講座

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中!
会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

タイトルとURLをコピーしました