【メモ】Laravelで画像アップロードを試してみた

はじめに

Laravelの練習としてプロフィール編集機能をつくる過程で、画像アップロード機能の搭載にチャレンジしたので、自分用のメモとして残します。

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

usersテーブルに「icon」カラムを用意。

<?php

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

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->string('icon')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

ルーティング(web.php)

プロフィール編集用(profedit)と、画像保存用(profupdate)のルーティングを追加。

Route::get('/profedit', 'ProfController@index')->name('profedit');

Route::post('/upload', 'ProfController@store')->name('profupdate');

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

プロフィール編集用のコントローラーを作成して、アクションを追加。

public function index()
{
    $user = Auth::user();
    return view('profedit', ['user' => $user]);
}

public function store(Request $request, User $user)
{
    $path = $request->file('icon')->store('public/icon');

    $user = User::find($request->user_id);
    $user->icon = basename($path);
    $user->save();
    return redirect('mypage')->with('success', '新しいプロフィールを登録しました');
}

$request->file(‘name’)->store(‘public/icon)で、storage/app/public/iconに画像を保存できる。データベースへはファイル名のみ保存する。

シンボリックリンクの作成

php artisan storage:link

これをターミナルで実行することで、public/storage から storage/app/public にシンボリックリンクを貼れる。

フォームを準備

<form method="POST" action="{{ route('profupdate') }}" enctype="multipart/form-data">
@csrf
<input type="file" name="icon" class="form-control">
<button type="submit">アップロード</button>

@csrfを忘れずに!(エラーが出る)

ファイルアップロード用のフォームはtypeにfileを指定する。

画像の表示

アイコンの表示は、これでいけました。

@if($user->icon) 
 <img src="{{ asset('storage/icon/' . $user->icon ) }}" alt="icon" width="200px" />
@else

まとめ

バリデーションをすっとばしているので、別途取り組みます!

(参考)https://qiita.com/maejima_f/items/7691aa9385970ba7e3ed

(参考)https://qiita.com/u-dai/items/8a904cc7fd2795c0e70d

(参考)https://promidea.co.jp/archives/2377

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です