【Laravel】画像保存処理実行時のエラー対処 #PHP

Laravelで画像保存処理を実行中、遭遇したエラーと対処法をまとめました。

開発環境

PHP7.4
Laravel6
Bootstrap4.4
Docker20.10.8

前提

画像保存処理は実装済み
テーブル作成・マイグレーション実行済み
バリデーション実装済み
フォーム作成済み
プレビュー表示処理実装済み(JavaScript)
Intervention Image インストール済み
public artisan storage:link 実行済み

❗注意

コマンドをコピペして実行する際、コマンドの最後に余分なスペースが入らないよう注意しましょう。コマンドが強制実行される場合があります。実行の際は慎重に。

1. 画像が正常に保存されない。

フォームをクリックして拡張子.JPEGの画像ファイルを選択。
プレビューも正常に表示
更新ボタンクリック後、プロフィール画面に遷移するはずが、バリデーションに引っかかり保存できない。

バリデーションは以下の通りです。(画像アップロード処理の部分のみ抜粋)

src/app/Request/UserRequest.php

    public function rules()
    {
        return [
            'avatar' => ['file', 'image'],
        ];
    }

    public function attributes()
    {
        return [
            'avatar' => 'プロフィール画像',
        ];
    }

Viewは以下のとおりです。(画像フォームのみ抜粋)

src/resources/view/users/edit.blade.php

<form method="POST" class="p-3 mb-1" action="{{ route('users.update', ["name" => Auth::user()->name] )}}" >
    @method('PUT')
    @csrf

     -----省略-----

       <div class="avatar-form image-picker text-center">
          <input type="file" name="avatar" id="avatar" class="d-none @error('avatar') is-invalid @enderror" accept="images/png,image/jpeg" />
          <label for="avatar" class="d-inline-block">
               @if (!empty($user->avatar))
               <img src="/storage/avatars/{{$user->avatar}}" class="rounded-circle" style="object-fit: cover; width: 125px; height: 125px;">
               @else
              　　<img src="/images/default.svg" class="rounded-circle" style="object-fit: cover; width: 125px; height: 125px;">
               @endif
          　</label>
          　<div class="small">プロフィール画像をアップロードできます。</div>

          　@error('avatar')
          　<span class="invalid-feedback" role="alert">
              　<strong>{{ $message }}</strong>
          　</span>
          　@enderror

        </div>

色々調べてみた結果、formタグに以下一文が抜けていたせいで保存出来なかった事が判明

enctype="multipart/form-data"

enctype="multipart/form-data"については以下の方の記事をご参考いただくと、理解が深まります。

以下のように修正します。

src/resources/view/users/edit.blade.php

<!-- enctype="multipart/form-data"追加 -->
<form method="POST" class="p-3 mb-1" action="{{ route('users.update', ["name" => Auth::user()->name] )}}" enctype="multipart/form-data">

再度フォームをクリックして拡張子.JPEGの画像ファイルを選択。
プレビューも正常に表示
更新ボタンクリック後、プロフィール画面に遷移するはずが、今度は以下のエラーに遭遇。

GD Library extension not available with this PHP installation.

2. GD Library extension not available with this PHP installation.解決

調べてみたところ、インストール済みのIntervention Imageを使用するためには、GD Libraryがインストールされていなければならないことが判明

GD Libraryのインストール手順は、Dockerfileにコードを追加して行う方法と、
ターミナルコマンドで実行する方法があるが、私はターミナルコマンドでインストールしたので、その方法を解説します。

appコンテナに入って実行してください

　以下コマンドでappコンテナに入る。(環境によってはコマンドが異なります)

ターミナル

$ docker compose exec app bash

以下のコマンドを上から順に実行(PHP7.4の場合)

ターミナル

# apt-get update
# apt-get install -y zlib1g-dev libpng-dev libjpeg62-turbo-dev
# docker-php-ext-configure gd --with-jpeg
# docker-php-ext-install -j$(nproc) gd

インストールできたらコンテナの再起動をしてください。
以下のコマンドで実行

ターミナル

　$　docker restart コンテナ名

コンテナ再起動後、再び画像を保存してみる。
* 再度フォームをクリックして拡張子.JPEGの画像ファイルを選択。
* プレビューも正常に表示
* 更新ボタンクリック後、プロフィール画面に遷移し画像も正常に表示されました。

【Laravel】画像保存処理実行時のエラー対処

Laravelで画像保存処理を実行中、遭遇したエラーと対処法をまとめました。

開発環境

前提

❗注意

目次

1. 画像が正常に保存されない。

2. GD Library extension not available with this PHP installation.解決

参考