[Laravel] 画像をアップロードしてDBに保存する

SPONSORED LINK

1. ファイルをアップロードする

それでは,HTMLからいきます.ファイルを送信するにあたり,新しく覚えるポイントは2つです.

formタグにマルチパートを書く

ファイルを送信するときは,formタグにenctype="multipart/form-data"を書かなければいけません.これを忘れるとファイル名しか送信できません.

詳しい説明は「enctype=’multipart/form-data’ってなんだ?」をどうぞ!

inputタグにtype="file"を書く

inputタグでは,送信する情報の種類によってtype="text"type="checkbox"などがありますが,今回はtype="file"を使います.こうすることで,テキストファイルや画像ファイルを送れるようになるんですね.

画像を送信するフォーム

以上のことをふまえて実際にフォームを書くと,下のようになります.

<form method="POST" action="http://127.0.0.1:8000/image" enctype="multipart/form-data">
<div class="form-group">
<input name="image" type="file">
</div>
</form>

LaravelCollectiveを使うなら,こんな感じですね.

{{ Form::open(['method' => 'post', 'url' => url('belonging'), 'files' => true]) }}
<div class="form-group">
{{ Form::file('image', null) }}
</div>
{{ Form::close() }}

ここでページを見てみると,下のようなボタンが追加されています.「ファイルを選択」を押すとFinder (エクスプローラ) が開くので,アップロードしたいファイルを選択して,選択した画像のファイル名が表示されれば,送信する準備はOKです.

f:id:sera1098:20180722191336j:plain:w700

2. アップロードしたファイルを保存する

では,送信された画像をDBに保存する処理に移りましょう.

実装前の準備

DBに画像を保存する処理を実装するために,Packagistのintervention/imageを使います.入ってない方は以下の方法でインストールしてください.

ターミナルでプロジェクトのディレクトリを開いて,コマンドを打ちます.

composer require intervention/image

インストールしている間にconfig/app.phpに2行追加します.

providersの中に
Intervention\Image\ImageServiceProvider::class,
aliasesの中に
'Image' => Intervention\Image\Facades\Image::class,

これで準備完了です.

保存してみよう

ファイルを取得するときは,$request->imageか,または$request->file('image')を使います.$request->input('image')では画像を取得できずnullになるので,間違えないようにしてくださいね.

適当なコントローラに以下のプログラムを書きます.

$fileName$filePathは適宜変えてください.

$image = Image::make($request->image);
$fileName = 'sample.png';
$filePath = public_path() . '/img/';
$image->save($filePath . $fileName);

ここでpublic/img配下を見れば,sample.pngが保存されていることがわかりますね!

SPONSORED LINK

最後に

画像を扱う処理って難しいのかな?と思っていたんですが,Intervention Imageのおかげで簡単にできてしまいました!

ここでは紹介しなかったんですが,実はIntervention Imageを使えば,リサイズやグレースケール化もできてしまいます.試してみると面白いと思いますよ!