Laravelで画像アップロード実装が楽になるかもしれないlaravel-imageup

1 はじめに
2 環境
3 導入
4 実装
5 個人的にハマったこと
- 5.1 配列はダメ
- 5.2 PHPStanで引っかかる
6 さいごに
7 おすすめ書籍

はじめに

こんにちは。webアプリケーションを作る際にファイルアップロードはごく当然の機能で、Laravelでももちろん標準でサポートされています。が、今回は要件次第では実装がほとんど不要になるライブラリlaravel-imageupを紹介します。
（要件次第で、と前置きをつけた理由は後述します）

環境

PHP 7.3.3
Laravel 5.8.4
MariaDB 10.3.13

導入

公式のREADMEに従って、composerでサクッとインストールします。
なお、依存先のライブラリであるIntervention ImageがPHPのGD拡張もしくはImagick拡張に依存するので、あらかじめ入れておきましょう。

# インストール
$ composer require qcod/laravel-imageup
Installing qcod/laravel-imageup (1.0.6): Downloading (100%)
...
...
Writing lock file
Generating optimized autoload files
...
...
Discovered Package: qcod/laravel-imageup
Package manifest generated successfully.

# 設定ファイル生成
$ php artisan vendor:publish --provider="QCod\ImageUp\ImageUpServiceProvider" --tag="config"
Copied File [/vendor/qcod/laravel-imageup/config/imageup.php] To [/config/imageup.php]
Publishing complete.

# /storageを公開するためのシンボリックリンク作成(laravel-imageupはデフォルトでstorageを使う)
$ php artisan storage:link
The [public/storage] directory has been linked.

# インストール

$ composer require qcod/laravel-imageup

Installing qcod/laravel-imageup (1.0.6): Downloading (100%)

...

Writing lock file

Generating optimized autoload files

...

Discovered Package: qcod/laravel-imageup

Package manifest generated successfully.

# 設定ファイル生成

$ php artisan vendor:publish --provider="QCod\ImageUp\ImageUpServiceProvider" --tag="config"

Copied File [/vendor/qcod/laravel-imageup/config/imageup.php] To [/config/imageup.php]

Publishing complete.

# /storageを公開するためのシンボリックリンク作成(laravel-imageupはデフォルトでstorageを使う)

$ php artisan storage:link

The [public/storage] directory has been linked.

あとはライブラリを/config/app.phpに登録して導入完了です。

'providers' => [
  /*
   * Laravel Framework Service Providers...
   */
  ...
  ...
  /*
   * Package Service Providers...
   */
  Illuminate\View\ViewServiceProvider::class,
]

'providers' => [

* Laravel Framework Service Providers...

...

* Package Service Providers...

Illuminate\View\ViewServiceProvider::class,

]

実装

チュートリアルでお馴染みのmake:authでログイン機能を生成し、登録画面に画像アップロードのフォームを追加します。
なおマイグレーション処理は省略しますがUserテーブルにファイル名を保存するためのavatarカラムを追加済みとします。

$ php artisan make:auth
Authentication scaffolding generated successfully.

1 2	$ php artisan make:auth Authentication scaffolding generated successfully.

<p>次に<code>register.blade.php</code>を編集します。form要素に<code>enctype="multipart/form-data"</code>を追加するのをお忘れなく。</p>
<div class="form-group row">
    <label for="avatar" class="col-md-4 col-form-label text-md-right">Avatar</label>

    <div class="col-md-6">
        <input id="avatar" type="file" class="form-control{{ $errors->has('avatar') ? ' is-invalid' : '' }}" name="avatar" value="" required>

        @if ($errors->has('name'))
            <span class="invalid-feedback" role="alert">
                <strong>{{ $errors->first('avatar') }}</strong>
            </span>
        @endif
    </div>
</div>

<p>次に<code>register.blade.php</code>を編集します。form要素に<code>enctype="multipart/form-data"</code>を追加するのをお忘れなく。</p>

<label for="avatar" class="col-md-4 col-form-label text-md-right">Avatar</label>

<input id="avatar" type="file" class="form-control{{ $errors->has('avatar') ? ' is-invalid' : '' }}" name="avatar" value="" required>

@if ($errors->has('name'))

<strong>{{ $errors->first('avatar') }}</strong>

</span>

@endif

</div>

モデルクラス/app/User.phpにプロパティを追記します。

namespace App;

use QCod\ImageUp\HasImageUploads;

class User extends Authenticatable
{
  use HasImageUploads;

  protected $fillable = [
    'name', 'email', 'password', 'avatar',
  ];

  // ライブラリ用に追記するプロパティ
  protected static $imageFields = [
    'avatar'
  ];
}

namespace App;

use QCod\ImageUp\HasImageUploads;

class User extends Authenticatable

{

use HasImageUploads;

protected $fillable = [

'name', 'email', 'password', 'avatar',

];

// ライブラリ用に追記するプロパティ

protected static $imageFields = [

'avatar'

];

}

Userテーブルにレコードを作成する処理ところで、avatarカラムに値を入れるためのコードを追記します。

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
        'avatar' => sprintf('%s/%s', config('imageup.upload_directory'), $data['avatar']->hashName()), // 追記
    ]);
}

protected function create(array $data)

{

return User::create([

'name' => $data['name'],

'email' => $data['email'],

'password' => Hash::make($data['password']),

'avatar' => sprintf('%s/%s', config('imageup.upload_directory'), $data['avatar']->hashName()), // 追記

]);

}

実際にはRequestクラスでのバリデーションなどありますが、これで最低限の実装完了です。フォームを送信してみましょう。
アップロードした画像が/app/storage/app/public/uploadsに保存されていれば成功です。

個人的にハマったこと

配列はダメ

私がこのライブラリを使った時、実装の要件として「複数のファイルを一度にアップロードできる」というのがありました。当初は特に深く考えず以下のようなhtmlを書いてましたが、ここで軽くハマりました。

<input type="file" name="avatar[]">
<input type="file" name="avatar[]">
<input type="file" name="avatar[]">

この状態のままだと、前述の$data['avatar']に配列で格納され、ライブラリの自動アップロードが効かなくなるばかりかエラーを吐いてしまいます。
そもそもライブラリ側がIlluminate\Http\UploadedFileを受け取ることが前提なので、この場合は以下2つの解決策があります。

inputのname要素をname="avatar_1"name="avatar_2"というようにユニークな値で記述する
自動アップロードを無効化して（デフォルトでは有効）、foreachなどでひとつずつ手動でアップロードする

私は後者で解決しました。
自動アップロードを無効化する場合は設定ファイルで'auto_upload_images' => falseとしてもよいのですが、アプリケーション全体に影響してしまうので、モデルクラスで以下のようにプロパティを設定します。

protected static $imageFields = [
    'avatar' => [
        // override global auto upload setting coming from config('imageup.auto_upload_images')
        'auto_upload' => false,
    ],
];

protected static $imageFields = [

'avatar' => [

// override global auto upload setting coming from config('imageup.auto_upload_images')

'auto_upload' => false,

];

あとは$model->uploadImage($uploadedFile, 'avatar');で、配列に格納されているUploadedFileオブジェクトをひとつずつ渡せばOKです。

PHPStanで引っかかる

uploadImageメソッドが、PHPコードを静的解析するツールであるPHPStanでエラーを吐きます。
ライブラリのPHPDocが以下のようになっているため「第二引数$fieldがNULLのみ受け付ける」という意味になってしまっています。

/**
 * Upload and resize image
 *
 * @param $imageFile
 * @param null $field
 * @throws InvalidUploadFieldException|\Exception
 */
public function uploadImage($imageFile, $field = null)
{
  ...
  ...

/**

* Upload and resize image

* @param $imageFile

* @param null $field

* @throws InvalidUploadFieldException|\Exception

public function uploadImage($imageFile, $field = null)

{

...

これはuploadImageをオーバーライドするか、モデルクラスに適当なメソッドを作って、その中でuploadImageを呼ぶようにしましょう。

さいごに

少々面倒なファイルアップロード処理を少ないコードで実装できるlaravel-imageupを紹介しました。中身とその挙動を把握した上で使えばかなり便利だと思います。また、Laravel本体のバージョンに追随している点も地味に長所だと思います。

日	月	火	水	木	金	土
« 4月				6月 »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Laravelで画像アップロード実装が楽になるかもしれないlaravel-imageup

はじめに

環境

導入

実装

個人的にハマったこと

配列はダメ

PHPStanで引っかかる

さいごに

おすすめ書籍

フォロー

アプリ情報