Laravelでサクッとを画像アップロードする手順


Laravelで画像をアップロードする機能を実装しました。 Laravelには、あらかじめファイルストレージという機能が搭載されているので、これを用いて簡単に画像をアップロードできます。

ドキュメントにも詳しく記述されているのですが、何箇所かつまった箇所があったので、メモを残しておきます。

設定

設定ファイルは「config/filesystems.php」にあります。

  • local
  • public
  • s3

とあるように、保存先のストレージを設定することができます。
今回は、開発環境を準備したので、localにアップロードした画像を保存していきます。 defaultでlocalになっているので、特に編集する箇所はありせん。

View -フォームの作成-

先に画像の投稿フォームを作成しておきます。

フォームは、htmlで直書きするのではなく、Formファザードを使うと楽に作成できます。 Formファザードは、Laravel5以上だと、デフォルトでは、インストールされていません。 Class ‘Form’ not foundとでた方は、こちらを参照にしてインストールしましょう。

{{Form::open(['action' => 'HelloController@store', 'files' => true])}}
    <div class="form-group">
        {{ Form::file('thefile') }} 
    </div>
   {{Form::submit()}}
{{Form::close()}}

Formファザートを用いてフォームを作成します。
ここで気をつけるべきは、openの引数に’file’ => ‘true’を忘れないようにすること。 これを見落とすと、フォームがファイルのアップロードをサポートしません。
私は、見落としてしまったために1時間ほど、はまってしまいました。

form

上記のような、プレーンなフォームが作成できたはずです。

Contoroller -保存-

コントローラにて「storeメソッド」を用いてアップロードファイルの保存を行います。

public function store(Request $request)
{
    $request->file('thefile')->store('images');
    return view('hello.store');
}

これだけで、「storage/app/images」以下に画像がアップロードされたはずです。 storeメソッドを用いることで、保存することが可能です。 引数には、保存先のstorageからのパスを記述します。 しかし、ファイル名をみていただければわかると思いますが、ファイル名がハッシュ化されていて、よくわかりません。

次のように変更しましょう。

public function store(Request $request)
{
    $name = $request->file('thefile')->getClientOriginalName();
    $request->file('thefile')->storeAs('images', $name);

    return view('hello.store');
}

いかがでしょう?もともとのファイル名で保存されたかと思います。 storeAs()メソッドを用いることで、任意のファイル名をつけて保存することができます

引数の一つ目は、保存先のstoragaからのパス、二つ目が、ファイル名です。 ファイル名は、getClientOriginalName()メソッドを使用して取得しています。

まとめ

いかがだったでしょか? 結構簡単に作成できたかと思います。 画像のリサイズ等が必要な場合は、代わりにライブラリーIntervention/imageを使う方が良さそうです。

comments powered by Disqus