Laravelで画像ファイル等を受け取り、DB保存したい。

目的

Laravelでフロントから送信された画像ファイル＆文字データをDB保存します。
以下の方の参考になれば幸いです。
・画像ファイル＆文字データをDB保存してみたい。

関連Episode

①Reactで画像ファイルを送信するAPI送信の方法

マイグレーション

マイグレーションはDBのテーブルの内容を定義するようなもの。
以下のコマンドをターミナルで実施すると、マイグレーションファイルが作成される。

ターミナル

 php artisan make:migration create_posts_table --create=posts

database/migrationsに****_**_**_******_create_posts_tableというファイルが作成される。
up() の部分を更新する。画像データ（image）,文字データ(title)どちらもstring型のカラムにする。

****_**_**_******_create_posts_table

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

ターミナルでコマンドを実行して、マイグレーションを行う。

ターミナル

 php artisan migrate
　　Migrating: 2021_11_02_000009_create_posts_table
　　Migrated:  2021_11_02_000009_create_posts_table (30.15ms)

modelの作成

下記のコマンドで、modelを作成します。

ターミナル

 php artisan make:model Post

今回、modelの変更は行ないません。(App/Post.js)

Post.js

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}

Controllerの作成

ターミナルでControllerを作成します。
今回はAPIで通信を行うことを想定しているので、API/配下にcontrollerを作成する。

ターミナル

php artisan make:controller Api/PostController

App/https/database/...に作成されたControllerを下記の通り変更を行います。

postController.js

<?php

namespace App\Http\Controllers\Api; //追記

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;　　//追記

class PostController extends Controller
{
  public function create(Request $request)
  {
    $post = new Post;
    $post->title = $request->title;
    $path = $request->file('image')->store('public/image/');
    $filename = basename($path);
    $post->image = $filename;
    $post->save();
    return response()->json($golf, 200);
  }
}

解説

DBとの接続を行うためにmodelをcontrollerに読み込みます。

post.js

 use App\Post;

フロントから送られてきたデータをDBに保存します。
まず、空っぽのPostを作成します。
次に、title。最後に画像ファイルであるimageをpostしていきます。
storeメソッドは、引数内のディレクトリ(今回ならpublic/image)にファイルを保存し、そこへのディレクトリパスを返します。(今回のpath)
そのため、imageはpublic/image内に保存(store)し、そこへのアドレスを$pathへ定義しています。

post.js

  $post = new Post;
  $post->title = $request->title;
  $path = $request->file('image')->store('public/image/');

その後、$pathをファイル名だけ抜き出してDBに送信しています。

post.js

  $filename = basename($path);
  $post->image = $filename;

最後にDBへ保存します。

post.js

  $post->save();

ルーティング設定

routes/apiにて先程作成したControllerにAPIアドレスを割り当てます。

api.php

Route::group(['middleware' => 'api'], function(){
    Route::post('post/create','Api\PostController@create');
}); 

POSTMANでテストしてみる

テストは、POSTでhttp://localhost/api/post/create
Body->formDataでtitle->テキスト形式、image->file形式で送信します。
(POSTMANの使い方は別でまとめますね。)

まとめ

今回はLaravelで受けた画像ファイル、文字データをDB保存してみました。
作成したAPIを使用することで、フロント側からデータ保存を受け付けることができます。
今後、このデータをReactで表示させる方法もまとめますね