【Laravel】Authを使ったユーザー管理機能でicon画像を保存したい。

Question

##icon画像を保存したいのですが、DBにはファイル名が保存されるものの、画像そのものがstorage/public/imagesへ保存されません。

＊ 解決済 ＊　解決した内容はページ最後に追記します。(2020/2/18)
※ 回答者様のアドバイスを受けて、DBのimageカラムへは画像のファイル名ではなく自動で生成される文字列で表示する方法を取ることにしました。

###＊ コード

** 1. Auth/RegisterController.php**【Controller】
** 2. User.php**【Model】
** 3. auth/register.blade.php** 【View】

1. RegisterController.phpの記述

//省略せずに全て載せました...長くなり申し訳ありません。
<?php
namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;
// アップロード時に既存ファイルあれば削除できるようにするため
use Illuminate\Support\Facades\Storage;

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'profile' => ['required', 'string', 'max:255'],
            'image' => ['required', 'file', 'image','mimes:png,jpeg'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        $file_name = $data['image']->getClientOriginalName();
        $data['image']->store('public/image');
        //dd($file_name);=>'ファイル名.jpg'が取れます
        //dd($data['image'])=>データ取れます
        $user = User::create([
            'name' => $data['name'],
            'profile' => $data['profile'],
            'image' => $_FILES['image']['name'],
            // 'image' => $data['image'], ←'tmp_name'が保存されるので↑へ変更
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);

        return $user;
    }
}

1. User.phpの記述

//省略せずに全て載せました...長くなり申し訳ありません。
<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
// アソーシエーションのために
use Illuminate\Database\Eloquent\Model;

class User extends Authenticatable
// Illuminate\Foundation\Auth\UserはModelを基底クラスに持ちます（リファレンス）ので、Authenticatableを継承すれば祖先にModelはすでにある。
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'profile', 'image','email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    // アソーシエーション 
    /**
     * このコメントを所有するポストを取得
     */
    public function recipe(){
        return $this->hasMany('App\Models\recipe');
    }
}

1. auth/register.blade.php

<!-- 省略 -->
<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
    @csrf
    <!-- 省略 -->
    <div class="form-group row">
        <label for="image" class="col-md-4 col-form-label text-md-right">Example file input</label>
        <div class="col-md-6">
            <input type="file" class="form-control-file" id="image" name="image" accept="image/png, image/jpeg">
        </div>
    </div>
      <!-- 省略 -->
</form>
<!-- 省略 -->

###＊ 状況
● ユーザーの登録時、画像のファイル名がDBに保存されている。

● public/imageへ画像が保存されない
※今、保存されているのはRecipe登録時に、保存した画像です。User登録時に保存をした画像ではないです。

● 個人的にはこの書き方が悪いのではないかと思っています。

protected function create(array $data)
    {
        $file_name = $data['image']->getClientOriginalName();
        $data['image']->store('public/image');
        //dd($file_name);=>'ファイル名.jpg'が取れます
        //dd($data['image'])=>データ取れます
        $user = User::create([
            'name' => $data['name'],
            'profile' => $data['profile'],
            'image' => $_FILES['image']['name'],
            // 'image' => $data['image'], ←'tmp_name'が保存されるので↑へ変更
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);

        return $user;

2日間悩みに悩みましたが、どうしても画像をローカルに保存することができません。
どのような手順で問題を解決すれば良いかなどアドバイスや、回答をいただけますと幸いです。
何卒よろしくお願いいたします。

★★★ 解決できた記述(変更箇所のみ)

1. RegisterController.phpの記述

    protected function create(array $data)
    {
     
        $path = $data['image']->store('public/image');

        $user = User::create([
            'name' => $data['name'],
            'profile' => $data['profile'],
            'image' => $path,
            // 'image' => basename($path),←ファイル名を保存すると名前がかぶった時に上書きされてしまう。
            // 'image' => $data['image'], ←'tmp_name'が保存されてしまう。
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);

        return $user;
    }

1. User.phpの記述

変更なし

1. auth/register.blade.php

<!-- my-iconを全てimageへ変更(カラム名と同じ) -->
<!-- 省略 -->
<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
    @csrf
    <!-- 省略 -->
    <div class="form-group row">
        <label for="image" class="col-md-4 col-form-label text-md-right">Example file input</label>
        <div class="col-md-6">
            <input type="file" class="form-control-file" id="image" name="image" accept="image/png, image/jpeg">
        </div>
    </div>
      <!-- 省略 -->
</form>
<!-- 省略 -->

1. view/user/show.blade.php

表示させる部分　<img src="{{Storage::url($user->image)}}" alt="画像だよ" class="img-icon">

<tr class="row">
            <th class="col-4">icon</th>
            <td class="col-6">
              <div class="box-img">
                <img src="{{Storage::url($user->image)}}" alt="画像だよ" class="img-icon">
                {{-- <!-- <img src="../storage/image/{{$user->image}}" alt="画像だよ" class="img-icon"> --> --}}
                {{-- <!-- <img src="/storage/{{$user->image}}" alt="画像だよ" class="img-icon"> -->--}}
              </div>
            </td>
          </tr>

Answer 1

コードを以下のように変更する必要がありそうです。

register.blade.php

• フォームのinput要素のname属性を"image"にする

<input
    id="my-icon"
    accept="image/png,image/jpeg"
    class="form-control-file"
    name="image"
    required
    type="file"
>
@error('image')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

RegisterController.php

• コントローラのcreateメソッドでは保存先のパスをimageカラムにセットする

protected function create(array $data)
{
    $path = $data['image']->store('public/image');

    return User::create([
        'name' => $data['name'],
        'profile' => $data['profile'],
        'image' => $path,
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
    ]);
}

これで
storage/public/images/ではなく
storage/app/public/image/にファイルが保存されるのではないでしょうか。

Comments

[Airi.]

丁寧にご回答ありがとうございます！！
頂いている方法でStorageへ保存ができましたが、DBのimageカラムへ画像のファイル名で保存ができませんでした、、
ただ、ご指摘頂いたおかげで、別の方法を試すことができ、以下成功いたしました！

●ファイル名でDBへ保存
●storage/app/public/image/へファイルを保存

ありがとうございます！！！！

＊＊質問です＊＊
もし、差し支えなければ教えてください。
$data['image']->store('public/image');

上記の記述が、画像自体を(storage/app/public/image/)へ保存する記述であると考えていました。
ですが、ご指摘のあった通り、以下のように$pathを使用しないと(storage/app/public/image/)に画像が保存できなかったので、(storage/app/public/image/)へ画像を保存する上で$pathを利用するのは必須なのでしょうか？

$path = $data['image']->storeAs('public/image', $file_name);
'image' => basename($path)
// 以下記述ではDBのimageカラムへ画像名を保存できるが、(storage/app/public/image/)へ画像を保存できなかった。
'image' => $_FILES['image']['name']

変更内容以下まとめ
◆ 変数定義の記述-----------------------------------------------
以下のように記述いたしました。

$file_name = $data['image']->getClientOriginalName();
$path = $data['image']->storeAs('public/image', $file_name);
-----------------------------------------------------------------------

◆ カラムへ保存する記述---------------------------------------
（１回目の修正）【 'image' => $path,】
ローカルに画像が保存されていました！
ですが、DBのimageカラムへはファイル名は保存できませんでした > <
【public/image/Ki4qHRvrR7EIBJdmPtPS8s17jntVzMpC6SUPq...】

（２回目の修正）【'image' => basename($path),】
こちらの記述に変更すると、(storage/app/public/image/)に画像が保存さた上で、
画像名がDBのimageカラムへ保存されるようになりました^^
-----------------------------------------------------------------------

[Lulucom]

> 画像のファイル名で保存
ユーザーのPC上でのファイル名を使い、サーバー上にも保存したいということですよね？
それだと、別のユーザーがたまたま同名のファイルをアップロードした場合に、サーバー上のファイルが上書きされてしまうのではないでしょうか。
そのため、独自のファイル名で保存するのが良いと思いました。例えば、上記のKi4qHRvrR7EIBJdmPtPS8s17jntVzMpC6SUPq...のようにサーバーが付けてくれた名前で保存する、あるいはユーザーのidなどを元にして作成したような重複しないファイル名で保存する、のが良いと思います。

[Lulucom]

> 上記の記述が、画像自体を(storage/app/public/image/)へ保存する記述であると考えていました。
合っています。

> ですが、ご指摘のあった通り、以下のように$pathを使用しないと(storage/app/public/image/)に画像が保存できなかったので、(storage/app/public/image/)へ画像を保存する上で$pathを利用するのは必須なのでしょうか？
そんなことはないと思うんですけどね・・・

[Lulucom]

> public/image/Ki4qHRvrR7EIBJdmPtPS8s17jntVzMpC6SUPq...

usersテーブルのimageカラムには、このようなパス名も含めたファイル名で保存するのが一番良いと考えています。Bladeでユーザーの画像をimg要素等で表示するときは、以下のような感じで画像のURLを取得できると思います。
<img src={{ Storage::url($user->image) }}>

[Airi.]

Lulucomさんありがとうございますm(__)m
そこまで考えが及んでいませんでした...
ご指摘ありがとうございます！
以下記述で画像も表示できるようになりました！
<img src={{ Storage::url($user->image) }}>

この文字列がどのようにできているのかまで理解ができていないのですが、
先ほどのご指摘にあったように、ファイル名がカブることは全くないのでしょうか？

[Lulucom]

$data['image']->store('public/image');
このコードで保存するとそのように複雑な名前で保存してくれます。被ることはないはずです。
（いや、もしかしたらもっと前の段階でPHPがその複雑な名前を付けてくれてるのかもしれません）

[Airi.]

そうなんですね！
本当にとても勉強になりました！
ありがとうございますm(__)m

[Lulucom]

ありがとうございました。