Laravel6.0 画像アップロードを実装したいです。

Question

こんばんは。
Laravelを扱う勉強を兼ねて、画像投稿掲示板を作成しているのですが、投稿した画像のファイルパスをDBに格納させる方法が調べてみても上手く実装できず詰まってしまいました。
storage:link ArtisanコマンドでStorageフォルダを作成、その中に画像を保存するところまでは上手くできました。
具体的に行いたいことは下記の通りです。

1.投稿した画像ファイルをstorage/app/imagesフォルダに保存（現状出来上がったのはここまでです。）
2.保存した画像ファイルのファイルパスをDBに格納
3.ファイルパスを参照し、詳細ぺージで画像を表示

環境は以下の通りです。
FW：Laravel6.0
OS：Windows10 Home
DB：MySQL（phpmyadmin）

以下、Pictureクラスのコントローラ、詳細ページのビュー、新規投稿ページのビュー、ルーティング、picturesテーブル定義のソースコードです。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Picture;

class PictureController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
       if($request->filled('keyword')){
          $keyword=$request->input('keyword');
          $message='「'.$keyword.'」で検索';
          $pictures = Picture::where('content','like','%'.$keyword.'%')->get();
           //データベースに格納されてあるデータの中で、入力されたキーワードが含まれているものを呼び出す。
        }else{
            $message='This is my picture memo.';
            $pictures = Picture::all();
             //データベースに格納されてあるデータを全て呼び出す。
        }
        return view('index',['message'=>$message,'pictures'=>$pictures]); 
        //html上にここで格納した変数の中身を表示させる為に渡す。
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create(Request $request)
    {
        $message='New picture';
        return view('new',['message'=>$message]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $picture=new picture();
        //投稿した画像とコメントをDBに格納させる
        $picture->user_name=$request->user_name;
        $picture->content=$request->content;
        $picture->image=$request->file('thefile')->storeAs('images', 'image'.$picture->id);       //storageフォルダに投稿した画像を保存する            
        $picture->save();
         //tinkerコマンドと同じ
        return redirect()->route('picture.show',['id'=>$picture->id]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\picture  $picture
     * @return \Illuminate\Http\Response
     */
    public function show(Request $request,$id,Picture $picture)
    {
        $message='This is your picture.'.$id;
        $picture=Picture::find($id);
         //$idに格納された番号と一致したデータを引っ張り出す。
        return view('show',['message'=>$message,'picture'=>$picture]);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\picture  $picture
     * @return \Illuminate\Http\Response
     */
    public function edit(Request $request,$id,picture $picture)
    {
        $message='Edit your picture.'.$id;
        $picture=Picture::find($id);
         //$idに格納された番号と一致したデータを引っ張り出す。
        return view('edit',['message'=>$message,'picture'=>$picture]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\picture  $picture
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request,$id, picture $picture)
    {
        $picture=Picture::find($id);
        //登録したブックマークをDBに格納させる
        $picture->content=$request->content;
        $picture->user_name=$request->user_name;
        $picture->save();
         //tinkerコマンドと同じ
        return redirect()->route('picture.show',['id'=>$picture->id]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\picture  $picture
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $request,$id,picture $picture)
    {
        $picture=Picture::find($id);
        $picture->delete();
        return redirect('/pictures');
    }
}

@extends('layout')

@section('content')
<h1>MYPICTURE</h1>
<p>{{$message}}</p>
{{Form::open(['route'=>'picture.store','files'=>true])}}
<div class="form-group">
    <!--投稿した画像のユーザーネームをDBに格納させる-->
    {{Form::label('user_name','Name:')}}
    {{Form::text('user_name',null)}}
</div>
<div class='form-group'>
    <!--投稿したコメントをDBに格納するビュー-->
    {{Form::label('content','Content:')}}
    {{Form::text('content',null)}}
</div>
<div class='form-group'>
    <!--ファイルを読み込む-->
    {{Form::file('thefile')}}
</div>
<div class="form-group">
    {{Form::submit('作成する',['class'=>'btn btn-primary'])}}
    <a href='{{ route("picture.list")}}'>一覧に戻る</a>
</div>
{{Form::close()}}
@endsection

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return redirect('/picture');
});
Route::get('/pictures','PictureController@index')->name('picture.list');
Route::get('/picture/new','PictureController@create')->name('picture.new');
Route::post('/picture','PictureController@store')->name('picture.store');
Route::get('/picture/edit/{id}','PictureController@edit')->name('picture.edit');
Route::post('/picture/update/{id}','PictureController@update')->name('picture.update');
Route::get('/picture/{id}', 'PictureController@show')->name('picture.show');
Route::delete('/picture/{id}','PictureController@destroy')->name('picture.delete');
?>

    @extends('layout')
<!--各ページのビューを司る-->
@section('content')
<h1>MYPICTURE</h1>
<div>
    <p>{{$message}}</p>
    <p>{{$picture -> content}}</p>
    <p>{{$picture -> user_name}}</p>
    <p>
        <a href='{{route ("picture.list")}}' class='btn btn-outline-primary'>一覧に戻る</a>
        <a href='{{route ("picture.edit",["id"=>$picture->id])}}' class='btn btn-outline-primary'>編集</a>

    </p>
</div>
<div>
    {{Form::open(['method' => 'delete','route'=> ['picture.delete',$picture->id]])}}
    {{Form::submit('削除')}}
    {{Form::close()}}
</div>
@endsection

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatepicturesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('pictures', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('pictures');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddColumnUsername extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('pictures', function (Blueprint $table) {
            $table->string('user_name');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('picture', function (Blueprint $table) {
            //
        });
    }
}

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddColumnImage extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('pictures', function (Blueprint $table) {
            //投稿した画像のファイルパスを格納
            $table->string('image');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('pictures', function (Blueprint $table) {
            //
        });
    }
}

以下、作成したDBのキャプチャです。
「image」カラム（String型）にファイルパスを格納するつもりです。（スクショ撮影時はnullになっています。）

20200530追記
Pictureのモデルクラスですが、artisanでファイルを作成したのみで、中身は未設定です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class picture extends Model
{
    //
}

以上、不勉強で至らぬ所ではございますが、ご教授・ご助言をお願い致します。m(_ _)m

Comments

[rururu3]

ぱっと見出来てていい気がするけど、とりあえず
pictureクラスのソースとテーブル定義(picturesテーブル作成のマイグレーションファイルのソース)
も載せてほしいです

[youth_k0228]

こんばんは。
レスが遅くなってしまい、大変申し訳ありません。
先程、Pictureクラスと各マイグレーションファイルを追記致しました。
恐れ入りますが、ご査収の程宜しくお願い致します。

[rururu3]

一番欲しい
use App\Picture;
が無いです…。
(Pictureクラス)

[youth_k0228]

失礼致しました。
Pictureのモデルクラスはartisanでファイルを作成したのみで、中身は未設定です...。

[rururu3]

問題なくimageフィールドに追加されたなぁ…気になったことはDBのデータにおいてcreate_atとかの日付がかなり過去とかなので、データ処理行ってるかとかかなぁ…

[rururu3]

ちょっと確認ですが

1.投稿した画像ファイルをstorage/app/imagesフォルダに保存
2.保存した画像ファイルのファイルパスをDBに格納
3.ファイルパスを参照し、詳細ぺージで画像を表示

これの1しかできてないってことでいいですよね？(imageフィールドには空文字かnullが入っているっていうことですよね？)

[youth_k0228]

レスが遅くなってしまいすみません。
はい。まだ１しか実装できておらず、imageフィールドはnullです。

[rururu3]

$picture->image=$request->file('thefile')->storeAs('images', 'image'.$picture->id); //storageフォルダに投稿した画像を保存する

ここの処理で値が入らないってことなので、
laravelのログでエラー出てないかとか

$wk=$request->file('thefile')->storeAs('images', 'image'.$picture->id); //storageフォルダに投稿した画像を保存する
\Log::info(print_r($wk, true));
$picture->image = $wk;

でlaravelのログに値を出してみるとかで調べてみるとかかなぁ…

[youth_k0228]

\Log::infoを入れたところ、下記のログが出力されました。
[2020-06-01 14:02:06] local.INFO: images/image
やはり値は入っていませんでした。

[youth_k0228]

すみません。
画像を保存する処理を「storeAs」から「store」に変更したところ、画像のパスがimageカラムに入れることができました！

以下Log
[2020-06-01 14:26:14] local.INFO: images/9fGrwB7juwgxt4cpEbOOnsAUvbwcPJktM6SHS0Mo.jpeg

[rururu3]

もしかして、現在の問題は、storeAsの処理だとimages/imageっていう値が入ってるってことだったりします？(だったら理由はわかります

[youth_k0228]

すみません、仰る通りです。
ファイル名を「イメージ+id」にしようと思い、storeAsを使いました。
記述が不十分で大変申し訳ありません。
ご教授の程お願い致します。

[rururu3]

だったら理由は簡単です…

Answer 1

解決したにもかかわらず、放置してしまい大変申し訳ありません。
以下、実装方法をQiitaに投稿致しました。

Laravel掲示板に画像投稿機能を追加してみた！

Answer 2

質問の内容がimages/imageっていう値が入っているっていうことなので回答します

(ファイル名を「イメージ+id」にしようと思い、storeAsを使いました。)

$picture->image=$request->file('thefile')->storeAs('images', 'image'.$picture->id); 

で$picture->idを使ってますが、$picture->idはbigIncrementsなのでsaveなどしてDBに反映されないと設定されないのでnullになるのが原因です

Comments

[youth_k0228]

すみません。
この場合、PictureControllerクラスの冒頭にbigIncrementを使用する記述を加えなければならないということでしょうか。
DBの「id」はbigIncrementで設定されており、「return redirect()」以下では「$picture->id」をそのまま使用しております。

[rururu3]

bigIncrementなのでデータ登録時にIDが決定する感じです。
なのでid取得しようとするならばsave後じゃないといけません

[youth_k0228]

すみません、それは存じ上げていませんでした。
質問を重ねてしまい申し訳ありませんが、「save()」の後に「storeAs」でidを取得することを記述するということでしょうか。

[rururu3]

ファイル名にidをどうしても利用したい場合はそうなります。
ファイルが保存できなかったときゴミデータが出る可能性があるのでトランザクション必要かもしれません。
＆画像名が推測しやすくなりますので推測されたくなければ注意が必要です

[youth_k0228]

間が開いてしまい申し訳ありません。
ファイル名にidを使用すると、そのようなリスクが表れるのですね...。
だとするとidは使わず、ランダムでファイル名付ける方向で実装したいと思います。
ありがとうございます。

Answer 3

fillableの対象になってなかったりguardedの対象になってる可能性は？

Comments

[youth_k0228]

こんばんは。
レスが遅くなってしまい、大変申し訳ありません。
モデルクラスは初期設定のままでしたので、fillableの対象を設定していませんでした...。
確認し、こちらを実装してみます。
ありがとうございます。