Laravel開発

Laravel8でCloudinaryで画像アップロードをする方法

Laravel8でCloudinaryで画像アップロードをする方法 Laravel開発

こんにちは。

テダスクのToshiです。

今回はLaravel8+Cloudinaryで画像アップロードをする方法について説明していこうと思います。

 

ここ最近は、自社製品でもお客様に納品する際もHerokuを使うことが増えました。

ただ、Herokuはストレージ機能はあるものの1日でリセットされてしまうため、ずっと保存することが出来ません。

そこでどうするかというと、AWSのS3に保存するのが一般的な感じもしますが、今回はHerokuのアドオンでもあるCloudinaryにしてみようと思いました。

 

しかしながら、Herokuが使われるのはRubyユーザーが多いみたいで、PHP+Cloudinaryの情報が多くありません。

Laravelに関してはLaravel5の記事がいまだに参考にされていたり、それがなぜか非公式のライブラリーを使っていたりでちゃんとした記事が見当たらなかったので、今回はCloudinary公式のライブラリーを使って画像アップロードまでの作業について書いていこうと思います。




操作環境について

PC:Windows10

LAMP環境:XAMMP(PHP7.4)

Laravel:8.5.2.1

状況:cloudinaryと言う名前でプロジェクト作成済み

Laravel8でCloudinaryで画像アップロードをする方法

Cloudinaryの利用登録

先ずは、Cloudinaryの登録をしましょう。

Laravel8でCloudinaryで画像アップロードをする方法

「SING UP FOR FREE」をクリックして登録します。

登録の詳細は省きます。

登録が完了すると、APIを使うための認証情報が表示されます。

Laravel8でCloudinaryで画像アップロードをする方法

「Dashboard」のページの画面左上に表示されます。

これは後程.envファイルに情報を入れるのに使いますので、場所だけとりあえず覚えておきましょう。

Cloudinary公式ライブラリーのインストール

composerでライブラリーのインストールをするために、Cloudinaryのgithubに移動します。

cloudinary-labs/cloudinary-laravel
Laravel SDK for Cloudinary. Contribute to cloudinary-labs/cloudinary-laravel development by creating an account on GitHub.

Laravel8でCloudinaryで画像アップロードをする方法

すると画面中程にインストール方法が載っていますので、composerでインストールしましょう。

composer require cloudinary-labs/cloudinary-laravel

インストールが完了したら、そのすぐ下にある「Configuration」を行います。

 

Laravel8でCloudinaryで画像アップロードをする方法

php artisan vendor:publish --provider="CloudinaryLabs\CloudinaryLaravel\CloudinaryServiceProvider" --tag="cloudinary-laravel-config"

Laravel8でCloudinaryで画像アップロードをする方法

見にくいですが、Publishing completeとなればOKです。

Publishが成功すると、configディレクトリに「cloudinary.php」が生成されます。

中身はこんな感じで、envから環境変数を取れるようになります。

return [

    /*
    |--------------------------------------------------------------------------
    | Cloudinary Configuration
    |--------------------------------------------------------------------------
    |
    | An HTTP or HTTPS URL to notify your application (a webhook) when the process of uploads, deletes, and any API
    | that accepts notification_url has completed.
    |
    |
    */
    'notification_url' => env('CLOUDINARY_NOTIFICATION_URL'),


    /*
    |--------------------------------------------------------------------------
    | Cloudinary Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your Cloudinary settings. Cloudinary is a cloud hosted
    | media management service for all file uploads, storage, delivery and transformation needs.
    |
    |
    */
    'cloud_url' => env('CLOUDINARY_URL'),

    /**
     * Upload Preset From Cloudinary Dashboard
     *
     */
    'upload_preset' => env('CLOUDINARY_UPLOAD_PRESET')
];

 

Laravelで環境設定

引き続きGithubを見ていきます。

Configurationの下に「API Keys」の項目がありますので、その内容を一度そのまま.envファイルにコピーします。

Laravel8でCloudinaryで画像アップロードをする方法

そうしたら、今度は実際に先程表示したCloudinaryのDashboardから、データをコピーします。

Laravel8でCloudinaryで画像アップロードをする方法

このコピーした値を.envファイルの「CLOUDINARY_URL=」に上書きする形で、貼り付けます。

Laravel8でCloudinaryで画像アップロードをする方法

ちなみに、「CLOUDINARY_UPLOAD_PRESET」と「CLOUDINARY_NOTIFICATION_URL」については、オプション設定なので、今回は説明はしません。

.envファイルを保存したら、設定を反映するためにキャシュクリアをします。

php artisan config:cache

アップロードするためのページの作成

ここからはアップロードに必要なRoute、Controler、Viewを作っていきます。

route/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CloudinaryUploadController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/uplopad', [CloudinaryUploadController::class, 'uplopad']);
Route::post('/upload', [CloudinaryUploadController::class, 'store'])->name('store');


app/Http/Controllers/CloudinaryUploadController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Cloudinary;

class CloudinaryUploadController extends Controller
{
    public function upload()
    {
        return view('upload');
    }

    public function store(Request $request)
    {
        $uploadedFileUrl = Cloudinary::upload($request->file('image')->getRealPath())->getSecurePath();
        dd($uploadedFileUrl);
    }
}

dd()については、アップロードされたか確認(試験)するために入れていますので、実際はこのdd()は消して下さい。

また、Cloudinaryにアップロードするためのメソッドについては、インストールで参考にしたGithubのUsageに使い方が載っていますので、詳しくはそちらを参考にして下さい。

resouces/views/upload.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cloudinary Upload Test</title>
</head>
<body>
    <form action="{{route('store')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="file" name="image">
        <button>画像をアップロード</button>
    </form>
</body>
</html>


アップロードをしてみる

アップロードする準備が終わったので、早速アップロードの試験をしてみます。

Laravel8でCloudinaryで画像アップロードをする方法

ファイルを選択した状態です。

画像アップロードをクリックしてアップロードします。

すると

Laravel8でCloudinaryで画像アップロードをする方法

こんな感じでレスポンスが返ってきました。

今度はCloudinaryのサイト上で、「Media Library」のページで実際に画像が上がっているかを確認します。

Laravel8でCloudinaryで画像アップロードをする方法

Newと書いてあるのが、アップロードした画像です。

うまくアップロードされていますね!

非常に簡単にアップロードできることが分かります。

アップロードに関するTips

Laravelだと画像を扱うとき「Intervention Image」を使うことが多いかと思いますが、このCloudinaryのライブラリーも同様の事が出来そうです。

その一つが「画像をリサイズしてアップロードする」ことができます。

例)

//ファイルの有無確認
$image_main = $request->hasFile('mainimage') ? $request->file('mainimage') : "";

//画像アップロード
$image_main_up =  $image_main ? Cloudinary::upload($request->file('mainimage')->getRealPath(), ['folder' => 'images', 'width' => 800,])->getSecurePath() : "";

 

先程のアップロードした画像名で気付いた方もいるかと思いますが、アップロードする前の名前ではなく、ランダムな名前になっています。

これはセキュリティ上の対策、名前をユニークにするための仕様みたいですが、オプションで変更もできます。

詳しくはCloudinaryのリファレンスに書いてありますので読んでみて下さい。

Upload API Reference | Cloudinary
Cloud-based Upload API with extensive options for uploading, transforming and processing images, videos, and raw files.

もしGuzzleHttp\Psr7\stream_for()のエラーが出たら

実は、この記事を書くちょっと前までGuzzleHttpのエラーが出ていてライブラリーの更新をしないと上手くいかなかったので、その対応についても書きたいと思います。

Laravel8でCloudinaryで画像アップロードをする方法

こんな風に、Cloudinaryにアップロードしようとするとエラーが出たことが有ります。

こうなってしまった場合は、php用のCloudinaryのライブラリーの更新が必要なので、composerでインストールします。

composer require "cloudinary/cloudinary_php:^2"

githubもとはこちら

cloudinary/cloudinary_php
PHP extension for Cloudinary. Contribute to cloudinary/cloudinary_php development by creating an account on GitHub.

このインストールをすると、stream_for()の記述方法が最新のGuzzleHttpのものに書き換えられ、エラーがなくなります。

 

まとめ

今回はLaravel8でCloudinaryにアップロードする方法について説明してきました。

Cloudinaryは容量やアクセス量、画像変換の数が一定を超えなければ無料で使えるサービスです。

画像メインでないサイトの場合は無料で足りるくらいだとおもうので、この機会に一度Cloudinaryを利用してみてはいかがでしょうか?

以上、「Laravel8でCloudinaryで画像アップロードをする方法」でした!




参考URL

Laravel File Upload to a Local Server Or to the Cloud
Learn how to upload Laravel files to a local server or, through Cloudinary’s PHP SDK, to the cloud

 

 

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

いいね!をしてWordPressの
お役立ち情報を受け取る!

TEDASK(テダスク)-埼玉県川口市のWEB制作事務所

コメント

タイトルとURLをコピーしました