Laravelで画像アップロード機能の実装

早速説明していきます！

開発環境
php 7.4.7
Laravel 7.15.0
MySQL 5.7.29

１、ルートを定義

＃web.php

Route::get('/image', 'ImageController@index');
Route::post('/image', 'ImageController@store');

２、画像アップロード用のファイル作成

＃ターミナル

$ php artisan make:controller ImageController

続いて作成したControllerを編集していきます。

＃app/Http/Controllers/ImageController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    /**
     * プロフィール登録フォームの表示
     *
     * @return Response
     */
    public function index()
    {
        return view('image/index');
    }
}

次にviewファイルにアップロード用のフォームを作成します。

＃resources/views/image/index.blade.php

<form method="POST" action="/image" enctype="multipart/form-data" >
    {{ csrf_field() }}
    <input type="file" name="image">
    <input type="submit">
</form>

フォームを利用するときは{{ csrf_field() }}でCSRFトークンの隠しフィールドを生成する必要があります。記述していないとエラーの原因になりますので気をつけましょう。

３、バリデーション

#ターミナル

$php artisan make:request ImageRequest
Request created successfully.

続いて作成したファイルを編集していきます。

#app/Http/Requests/ImageRequest.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ImageRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'image' => 'required|file|image|mimes:jpeg,png,jpg,gif|max:2048'
        ];
    }
}

さらにrulesメソッドにはバリデーションルールを記載します。

#app/Http/Controllers/ImageControllers.php

use App\Http\Requests\ImageRequest;

class ImageController extends Controller
{

    /**
     * 画像の保存
     *
     * @param ImageRequest $request
     * @return Response
     */
    public function store(ImageRequest $request)
    {

    }
}

４、画像ファイルを保存する

今回はローカルのstorageディレクトリにimagesディレクトリを作成し、”（ユーザID）.jpg”というファイル名で登録していきます。

#app/Http/Controllers/ImageControllers.php

use Illuminate\Support\Facades\Auth;

class ImageController extends Controller
{
    /**
     * 画像の保存
     *
     * @param ImageRequest $request
     * @return Response
     */
    public function store(ImageRequest $request)
    {

        $request->photo->storeAs('public/images', Auth::id() . '.jpg');

        return redirect('image')->with('success', '新しい画像をを登録しました');
    }
}

５、保存した画像を表示

今のままではstorage/appにアクセスできないので、シンボリックリンクを貼ります。

#ターミナル

$ php artisan storage:link

#app/Http/Controllers/ImageController.php

use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    /**
     * プロフィール登録フォームの表示
     *
     * @return Response
     */
    public function index()
    {
        $is_image = false;
        if (Storage::disk('local')->exists('public/images/' . Auth::id() . '.jpg')) {
            $is_image = true;
        }
        return view('image/index', ['is_image' => $is_image]);
    }
}

画像が表示できるか確認してみましょう。

#resources/views/image/index.blade.php

@if ($is_image)
<figure>
    <img src="/storage/images/{{ Auth::id() }}.jpg" width="150px" height="150px">
    <figcaption>現在のプロフィール画像</figcaption>
</figure>
@endif

保存した画像が表示できましたか？

次回はDBへ画像のpathを保存し、画像を出力する方法について紹介していきます。
本日もご覧いただきましてありがとうございます。
皆様のお役に立てていれば幸いです。