目的
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で表示させる方法もまとめますね
↧