表題の通りです。
画像ファイルをアップロードして、アプリ内で表示させたいと思います。
初心者なりに頑張ってみました。
やりたいこと
プロフィール用の画像をアップロードして、表示させたい。
画像ファイル用DB
今回は既存のusersテーブルにカラムを追加して、ファイルのパスを保存します。
php artisan make:migration add_image_column_users_table --table=image
ルーティング
マイページ内で画像投稿用のフォームに移動したいので、そちらにまとめます。
Route::group(['middleware' => ['auth']],function() {
//画像投稿フォーム表示
Route::get('userimage', 'UserEditController@index')->name('image.index');
//画像保存
Route::post('userimage', 'UserEditController@upload')->name('image.upload');
コントローラー
アップロード用のコントローラーを作成したいと思います。
//画像アップロード画面を表示
public function index()
{
return view('edit.user_image');
}
//画像アップロードされた画像を保存
public function upload(Request $request)
{
//バリデーション
$this->validate($request,[
'userimage' => 'required|image'
]);
if($request->isMethod('POST'))
{
$path = $request->file('userimage')->store('public/img');
$image = User::find(\Auth::id());
$image->image = basename($path); //imageカラムに保存
$image->save();
return back()->with(['success' => 'ファイルを保存しました']);
}
}
上のコードではstorage/app/public/img/内にアップロードした画像が保存されます。
メソッドをすぐ忘れるのでメモ。
store()は一意のファイル名を自動で生成してくれる。
isMethdは公式サイト様より
リクエストメソッドの取得
また、isMethodメソッドを使えば、指定した文字列とHTTP動詞が一致するかを調べることができます。
これでなくても、
if ($request->hasFile('image')) //hasFile()内はinput type の name属性
でも良さそう。
basenameはファイルパスを除いてファイル名のみを取り出してくれる。
ビュー
アップロードされた画像の保存場所と読み出し場所が違うそうです。
保存場所はstorage/app/public/
読み出し場所はpublic/storage/
なのでシンボリックリンクを設定します。ショートカットみたいな物らしい。
php artisan storage:link
これだけで良いとのこと。
これで読み出し場所から保存場所を参照出来るようになるそうです。というかなりました。
AWSのcloud９上では、こんなのができてました。
ちなみに、上のコードではstorage/app/public/img/内にアップロードした画像が保存されます。
画像の読み出しは、
<img src="{{ asset('/storage/img/' . \Auth::user()->image) }}">
はこんな感じで読み出し。ってかこのやり方で良いのか...?
asset()はファイルまでのフルパスを生成してくれるそうです。
これはhttps通信する時にややこしいみたい。一旦勉強はまた別の機会に。
困ったこと
最初コードを組んで、なんでも良いから画像を、とのことでスクリーンショットをアップロードしようとしたところ、エラーが。
The userimage failed to upload.
めっちゃアバウトなエラーで困る。
dd($request->file('userimage'));
ってしてもfalseってなる。何しても分からなくて困ってたのですが、
phpinfo();して確認したら、PHPの__ファイル制限が２MBまで__なんですね。知らなかった。
画像サイズ確認したら案の定超えてました。
覚えておきます。
非常に勉強になりました。
ここまで読んで頂いてありがとうございました。
こちらのサイト様を参考にさせていただきました。
Laravelで画像ファイルをアップロードするサンプル
画像アップロード（基本）
Laravelで画像をアップロードする方法
[Laravel] ユーザーのアイコン画像を投稿、表示させる機能の実装したのでメモ（画像の保存場所は？シンボリックリンクって？）
Laravelで画像ファイルを保存したい
【Laravel5.6】画像ファイルアップロードについてのポイントまとめ
本当にありがとうございます。