Vue3 axios Post、Laravel6 DBへ保存の際のエラー 500 (Internal Server Error)が解決できません。

Question

[実現したい事]
Vue3で作成したformの情報をaxios経由でLaravel DBへ保存したい。

[問題点]
DBへ保存できているのですが、
下記のエラーがLaravel Telescopeより確認できています。

上記Telescopeエラーの見方を教えてください。
なぜ「POST /api/images 」が二つあり、一つで500のエラーが出ているのか？
「POST /api/images 」が二つある要因もよくわかりません。

処理の流れは、
1.Vue側で作成したformの内容をaxios api経由でlaravelへPOST
2.Laravel側でformの情報をaxios経由で受け取りDBへ保存
3.保存処理が終わると別のページへリダイレクト
となっています。

Laravelルートの処理は以下です。

//formの作成ページ
Route::get('api/images', 'ImageApiController@index')->name('images.index');

//formからの情報をDBに保存メソッドのルート
Route::post('api/images', 'ImageApiController@store');

DB保存完了後のリダイレクト先ルート処理

Route::get('show','HomeController@show')->name('show');

・Laravel側、データを受け取ってDBへ保存するstoreメソッド内にaxios経由の情報がNull。受け取れていません。(dd($)で確認済み)

[問題のコード]
formの情報をaxiosからPOSTする際は以下のコードを書いています。
FormData() に値が入っていない事が原因かと思い、いろんな箇所でconsole.log()してみると、全ての箇所で値が取得できています。

〜〜省略〜〜

      //new FormData() を作成
      const data = new FormData();
      data.append("canvas", blob, "image/png");
      data.append("title", title.value);
      data.append("comment", comment.value);

      console.log(data.get("canvas"));
      console.log(data.get("title"));
      console.log(data.get("comment"));
      console.log(data);

      axios
        .post("/api/images/", data, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then(res=> {
          console.log("success");
        })
        .catch(error => {
          new Error(error);
        });
    };

Laravelデータを受け取って保存するstoreメソッドは以下の様に書いています。
request()-> の値がすべてnullになっています。

    public function store(Request $request, Image $image, TwitterOAuth $twitter)
    {
        /**
         *
         *Imageクラス、TwitterOAuthクラスはAppServiceProvider.phpに登録しています。
         *
         */
        //ログインユーザーのIDを保存
        $image->user_id = auth()->user()->id;

        //タイトル保存処理
        $image->title = request()->title;

        //コメント保存処理
        $image->comment = request()->comment;

        //AWS S3画像保存処理
        $file_name = request()->canvas;
        $path = Storage::disk('s3')->putFile('/',  $file_name, 'public');
        $image->image = $path;

        $image->save();

        return redirect()->route('show', compact('image'))->with('message', '投稿を作成しました');
    }

POST後にブラウザから

Symfony\Component\Debug\Exception\FatalThrowableError
Call to a member function hashName() on null
http://127.0.0.1:1180/api/images

となっており、該当のソースコードは
vendor/laravel/framework/src/Illuminate/Filesystem/FilesystemAdapter.php:240
return $this->putFileAs($path, $file, $file->hashName(), $options);

app/Http/Controllers/ImageApiController.php:55
$path = Storage::disk('s3')->putFile('/', $file_name, 'public');

となっております。

Comments

[natsume2233]

500エラー出た際のエラーの内容（internalのエラーメッセージだけでなく、ファイル名やコード行）がログに出力されていると思います。そちらの内容の追記して頂くと解決に近づくと思います。

[Fukusuke0604]

ありがとうござます。
POST後にブラウザから

Symfony\Component\Debug\Exception\FatalThrowableError
Call to a member function hashName() on null
http://127.0.0.1:1180/api/images

となっており、該当のソースコードは
vendor/laravel/framework/src/Illuminate/Filesystem/FilesystemAdapter.php:240
return $this->putFileAs($path, $file, $file->hashName(), $options);

app/Http/Controllers/ImageApiController.php:55
$path = Storage::disk('s3')->putFile('/', $file_name, 'public');

となっております。

Answer 1

以下の様にformタグの中にaxiosからPOSTの処理を書いたvueコンポーネント埋め込んでいた事でPOSTが2回リクエストされている。1回目はPOSTに情報が入っているからDBにも保存処理されていたが、2回目のPOSTは何も情報が入っていないから、Laeavel側で全ての値がnull、status500のエラーが出ていました。

                <form method="POST" action="{{route('images.store')}}" enctype="multipart/form-data">
                    @csrf
                    <image-component></image-component>
                </form>