【Laravel6.x】 画像アップロード&表示する方法

## 問題
Laravelで画像をアップロード&表示したい

## 完成系
![スクリーンショット 2024-04-23 12.24.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/8d1e2e9c-fc93-f67a-671f-f491b3e53433.png)

## 参考サイト
https://reffect.co.jp/laravel/how_to_upload_file_in_laravel

## 僕が行った手順
### ⓪usersテーブルに'file_path'を追加
```migrations/2024_04_17_055925_add_users_table_1columns.php
public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('file_path')->nullable();
    });
}
```
migrationファイルの作成方法は以下↓

https://qiita.com/rikako_hira/items/6a0a2b972ddbf638fefd

【解説】
画像のpathを保存する場所を作っている
ここのデータを取得して表示も行う

### ⓪-2 モデルで$fillableに追記
```User.php
protected $fillable = [
    'name', 'email', 'password', 'file_path',
];
```

【解説】
テーブルデータの変更を許可する処理を追記

### ①web.phpルーティング
```web.php
Route::resource('/profile', 'ProfileController');
```

### ②controller(画像更新ページへ遷移)
```ProfileController.php
public function edit(int $id)
{
    // 画像更新ページへ遷移
    $user = Auth::user();

    return view('original.profile.edit', [
        'user' => $user,
    ]);
}
```

### ③view(アップロードのフォーム作成)
```edit.blade.php
<div class="form-group mt-5">
    // ⭐️↓ここ
    <form action="{{ route('profile.update', ['profile' => $user['id']]) }}" method="post" enctype="multipart/form-data">
    @csrf
    // ⭐️↓ここ
    @method('PATCH')
        <label for="id">↓ファイルを選択してください↓</label><br>
        // ⭐️↓ここ
        <input type="file" id="input" name="file" class="cursor_pointer">
        <div class="profile-picture profile-picture-border mt-3">
            <img id="sample" class="img-fluid">
        </div>
        <button type="submit" class="btn btn-danger">アップロード</button>
    </form>
</div>
```
【解説】
・ファイルのアップロードを行う場合は、
enctype=”multipart/form-dataを忘れずにform要素入れる
・更新処理の場合、@method('PATCH')を記載する
・inputタグに「type="file"」「name="file"」を忘れずに記載する

### ④controller(画像更新処理)
```ProfileController.php
public function update(Request $request, $id)
{
    // ⭐️↓ここ
    $file_name = $request->file('file')->getClientOriginalName();
    $request->file->storeAs('public', $file_name);

    $user = Auth::user();
    $user->update(['file_path' => '/storage/'.$file_name]);

    return view('original.profile.index', [
        'user' => $user,
    ]);
    // ⭐️↑ここ
}
```
【解説】
・file() = fileメソッド = $requestのfileを取得、ファイルのみの情報を表示
・file('file') = fileメソッドの中にある('file')は、フォームのinput要素のnameを'file'にしているからそこと連動
・getClientOriginalName = 拡張子を含め、アップロードしたファイルのファイル名を取得
・storeAs() = アップロードしたファイル名または任意の名前を付けたいに使用
storeAsメソッドで指定したファイル名で保存される


### ⑤シンボリックリンクの作成
ターミナルコマンド
```
php artisan storage:link
```

【解説】
ファイルをアップロードしただけではブラウザからアップロードしたファイルを閲覧することはできない。
ブラウザからサーバ上のファイルにアクセスするためには、Laravelインストールディレクトリの下にある公開用の「publicディレクトリの下」に保存する必要がある。
しかし、アップロードしたファイルは「/storage/appの下」にあるためアクセスすることができない。
そのため「/publicディレクトリ」と「/storage/appディレクトリ」との間で「リンクを持たせる」必要がある。
リンクを貼ることで「/publicにアクセスすると/strorage/appディレクトリにアクセスすることができる」ようになる。
↓
シンボリックリンクが張られることにより、「/storage/app/publicの下」にupload.pdfファイルを保存すると「/public/storageからupload.pdf」にアクセス可能となる。

### ⑤画像の表示
```index.blade.php
<div class="profile-picture mt-5 mx-auto">
    // ⭐️↓ここ
    <img class="img-fluid cursor_pointer" src="{{ $user['file_path'] }}" alt="Profile Picture">
</div>
```

## 共通ヘッダーのアイコンの画像表示 / 共通ヘッダー画像とプロフィール画像のリンクをさせる場合
共通ヘッダーのアイコンの画像表示 / 共通ヘッダー画像とプロフィール画像のリンクをさせる場合は、
手順⓪~⑤の後に以下サイトの手順でできる

これから記載する


## プロフ画像参照元
https://ll-voice.com/%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC%E5%A3%B0%E5%84%AA%E3%82%B9%E3%82%AF%E3%83%BC%E3%83%AB%E5%A4%9C%E9%96%93%E3%83%BB%E9%80%B1%E6%9C%AB%E8%AC%9B/