LoginSignup
0
1

More than 3 years have passed since last update.

Laravel 画像の投稿機能とシンボリックリンク

Last updated at Posted at 2021-03-03

はじめに

Laravelにて簡単な画像付きレシピ投稿アプリを作成しています。
画像のアップロード機能を実装した際にシンボリックリンクという言葉を初めて知ったので、備忘録として記録しておくことにしました。

シンボリックリンクとは

Windouwsでいうところのショートカットのようなもの。
シンボリックリンクファイルを通して大元のフォルダを参照することができます。

やりたいこと

投稿フォームから画像を選択し送信ボタンを押すと一覧で表示されるという仕組み。

画像ファイルを選択し送信ボタンをクリック
image.png
一覧画面へ画像を表示
ここでレシピ投稿アプリなのに料理の写真ねーじゃん!とツッコまれる
image.png

画像の保存先

さて、コントローラーで受け取った画像ファイルは基本的に storage/app/public/image 内に保存させます。

RecipeController.php
public function create(Request $request){
        $recipe = new Recipe;
        $form = $request->all();

        //画像が送信されたら保存して $recipe->image_pathカラム にパスを保存する
        if (isset($form['image'])) {//変数に値が入っているかをチェック
            $path = $request->file('image')->store('image');// 画像をstorage/app/public/image配下に保存
            $recipe->image_path = basename($path);//パスからを取得したファイル名をimage_pathカラムに保存
        } else {
            $recipe->image_path = null;
        }

        unset($form['_token']);
        unset($form['image']);

        $recipe->fill($form)->save();
        return redirect('/home');
    }

ただ、実際にアプリケーションを起動するときに公開されるのはpublicディレクトリのみです。画像はstorage/app/public/imageに保存されているので画像データを持ってくることはできません。
そんなときにpublicディレクトリからstorage/app/public/imageへのショートカット機能の役割を果たすのががシンボリックリンクです。

シンボリックリンクの貼り方

artisanコマンドから簡単にできます。
まずpublicディレクトリへ移動します。

$ cd public

以下のコマンドを実行します。

$ php artisan storage:link

するとpublic内にstorageフォルダができます。(ショートカットが作成されるの方がわかりやすいかも)
矢印ができます。

image.png

public/imageと進んでいくと、storage/app/public/imageと同じ画像ファイルが存在していることがわかるかと思います。

ビューに画像を表示させる

画像表示部分のみ

home.blade.php
<img src="{{ asset('storage/image/' . $recipe->image_path) }}" width="100%" heigth="100%" alt="">

asset('ファイルパス')はpublicディレクトリのパスを返す関数です。
丁寧に書くと、app/public/storage/image/[画像のパス名]となるわけです。
さっきシンボリックリンクを貼ったおかげでこのフォルダパスを通すことができました。

終わり。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1