axiosでPOSTした画像が、Laravel DBに保存されない

Question

axiosでPOSTした画像をLaravel APIでDBに保存するプログラム以下を書きました。

vue.js単一コンポーネント、画像POST用のscriptコード

Vue.js

    // Canvasのデータをblob化
    saveCanvas: function (canvas_id) {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85); 
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      const data = new FormData();
      data.append("images", blob, "image.png"); 
      // data.append("file", this.file);
      
      //'path'というkeyで保存
        axios.post("/api/images", data)
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
            });
        },
    }

コントローラー(ImageController.php)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageApiController extends Controller
{
    public function store(Request $request)
    {
        if (request()->file) {
            $file_name = time() . '.' . request()->file->getClientOriginalName();
            request()->file->storeAs('public', $file_name);
 
            $image = new Image();
            $image->path = 'storage/' . $file_name;
            $image->save();

        } 
}

モデルファイル(image.php)

class Image extends Model
{
    //
    protected $fillable = [
        'path',
    ];
}

マイグレーションファイル

    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('path');
            $table->timestamps();
        });
    }

vue.js単一コンポーネント、画像POST用のscriptコードで
canvasに画像を描画し、blobデータを作成
blobをformDataにappendして、axiosでPOST
POSTされたblobファイルを、Laravel API側で処理・保存

コントローラー(ImageController.php)で画像をstorage/app/images/に画像保存

というプログラムを書きました。

画像の投稿（axios.post）が完了すると、コンソールには'success'と文字が返って来ているので、axios.postは完了していると思っています。
コンソールや、debugbarにエラーは出ないのに画像がDBに保存されません。

Answer 1

$filename = $request->images->name;

じゃないでしょうか？

Comments

[Fukusuke0604]

コメントありがとうございます。$filename = $request->images->name;　をcontroller ファイルに記載するのだと思うのですが、よく理解できていません。　もう少しコメントいただけないでしょうか？

[skys215]

data.append("images", blob, "image.png");
JavascriptからLaravelに渡したのはimagesで、fileじゃありません。なのでrequest()->fileではデータを読み込めないはずです。

[skys215]

コントローラーでdd(request()->all());すれば渡されたデータが全て見られます。
そこでJavascriptはデータを渡したかどうかが確認できます。
データが渡されて、save()の前後のどこかにdd($image)を出力すれば、imageフィールドにデータが入ってるかも確認できます。
データが入っててもデータベースに挿入されてなければ、save()の前に\DB::enableQueryLog()、save()の後にdd(\DB::getQueryLog())或いは\Log::info('SQL', \DB::getQueryLog())でSQLが見られます。
そこで問題が出てる部分を絞り込む事ができます。

[Fukusuke0604]

ありがとうございます。説明頂いたように、原因探してみます！

[Fukusuke0604]

おかげさまで無事に実装できました。また、デバックの方法も試してみました。教えていただき本当にありがとうございました!!