Q&A
ご回答ありがとうございます。
すみませんPHPもlaravelも初心者で調べてもわからないため、どういうコードを書けばやりたいことができるかを知りたくて、こちらで質問させていただいています。
アドバイスとして受け取っておきます。ありがとうございました。
前提・実現したいこと
Laravelでブログ投稿機能を作成しており、そこに画像アップロード機能を追加したいです。
以下のコードで、storage/publicに画像が保存されるのですが、
DBのimageカラムには「/Applications/MAMP/tmp/php/phpJ9dv4u」
という形式で入っています。
そのせいか、View画面で画像の表示ができません。
画像の表示方法・パスの保存方法でいいやり方をご存知の方、ご教示いただきたいです。
よろしくお願い致します。
発生している問題・エラーメッセージ
・下記の通り画像が表示されません
やったこと
・php artisan storage:linkの実行
・$filenameを指定してstoreAsで任意のファイル名で保存
・View画面で
<img src="{{ asset('public/eZGoR89jxudXsxoJZDPpuODp0HHZCptwvl1XamNH.png')}}>
と実際にフォルダに保存しているパスを指定しても表示できず、
<img src="{{ asset('/Applications/MAMP/tmp/php/phpJ9dv4u')}}>
としても画像表示できません。
該当のソースコード
**<BlogController.php>** //ブログ登録部分のみ public function exeStore(BlogRequest $request) { if(request('image')){ $inputs['image']=request('image')->store('public'); } //ブログのデータ受け取る $inputs = $request->all(); \DB::beginTransaction(); try{ //ブログを登録する Blog::create($inputs); \DB::commit(); } catch(\Throwable $e) { \DB::rollback(); abort(500); } \Session::flash('err_msg', 'ブログを登録しました。'); return redirect (route('blogs')); }
**<form.blade.php>** @extends('layout') @section('title', 'ブログ投稿') @section('content') <div class="row"> <div class="col-md-8 col-md-offset-2"> <h2>ブログ投稿フォーム</h2> <form method="POST" action="{{ route('store') }}" enctype="multipart/form-data" onSubmit="return checkSubmit()"> @csrf <div class="form-group"> <label for="title"> タイトル </label> <input id="title" name="title" class="form-control" value="{{ old('title') }}" type="text" > @if ($errors->has('title')) <div class="text-danger"> {{ $errors->first('title') }} </div> @endif </div> <div class="form-group"> <label for="content"> 本文 </label> <textarea id="body" name="body" class="form-control" rows="4" >{{ old('body') }}</textarea> @if ($errors->has('body')) <div class="text-danger"> {{ $errors->first('body') }} </div> @endif </div> <label for="image"> 画像 </label> <br> <input type="file" name="image" accept="image/png, image/jpeg"> <div class="mt-5"> <a class="btn btn-secondary" href="{{ route('blogs') }}"> キャンセル </a> <button type="submit" class="btn btn-primary"> 投稿する </button> </div> </form> </div> </div> <script> function checkSubmit(){ if(window.confirm('送信してよろしいですか？')){ return true; } else { return false; } } </script> @endsection
**<detail.blade.php>** @extends('layout') @section('title','ブログ詳細') @section('content') <div class="row"> <div class="col-md-8 col-md-offset-2 bg-secondary text-light"> <h1>{{ $blog->title }}</h1> <div class="border-bottom" style="padding:10px;"> <span>作成日：{{ $blog->created_at }}</span> <span>更新日：{{ $blog->updated_at }}</span> </div> <br> <div class="contener"> {{ $blog->body }} //画像表示部分 <div style="width: 18rem; float:left; margin: 16px;"> <img src="{{ Storage::url($blog->image)}}"width="100px"> </div> </div> </div> </div> @endsection
補足情報（FW/ツールのバージョンなど）
MAMPのバージョンは6.0.1(986)
VScodeバージョン: 1.52.1
laravelのバージョンは８です。
回答3件
0
（再翻訳中）Laravel 8.x ファイルストレージ：ファイルのアップロード
$path = $request->file('avatar')->store('avatars');
などでファイルを保存して、そのpathをdbに保存しましょう。
表示する時は（再翻訳中）Laravel 8.x ファイルストレージ：ファイルのURL
$url = Storage::url('DBに保存したpath');
で取得したURLを使いましょう。
・$filenameを指定してstoreAsで任意のファイル名で保存
試した事に実際のコードが無いので何したのか全く分かりませんが、それでも正しいやり方なら使えます。恥だと思ってもミスったコードは載せましょう、実際にはほとんど完成していて些細なミスの場合もあるかもしれません。
投稿2021/01/30 03:26
総合スコア6426
0
「LaravelではなくPHPで自前で組んだ場合にどうするか」を考えれば明白ではないでしょうか。
でなくても、
php
1 if(request('image')){ 2 $inputs['image']=request('image')->store('public'); 3 } 4 5 //ブログのデータ受け取る 6 $inputs = $request->all(); //↑の変数上書きしてる
やってること下記と同じです。
<?php $a = []; $a[] = 'a'; $a[] = 'b'; $a[] = 'c'; var_dump($a); $a = 'd'; var_dump($a);
あとはあまり影響はないかもしれませんがリクエストの取得の仕方は統一したほうが実装としてはキレイかなと。
Laravel 8.x HTTP Requests
-ファイル
$requestなら$requestで。
<img src="{{ asset('/Applications/MAMP/tmp/php/phpJ9dv4u')}}>
これは論外ですね。
テンポラリですし、asset()なかったとしてもブラウザから参照できる場所ではない。
投稿2021/01/29 21:24
編集2021/01/29 21:54
総合スコア80875
0
自己解決
以下の記述で、画像がある場合とない場合の取得処理を分けて、ファイル名を生成し保存場所を指定すると
思うような処理ができました。
回答いただいた方々ありがとうございました。
public function exeStore(BlogRequest $request)
{
// もし画像があれば
if($file = $request->image) {
// ファイル名をタイムスタンプとアップロードした元ファイル名で生成
$fileName = time() . $file->getClientOriginalName();
// storage内のpublic/uploadsファイルに保存
$target_path = public_path('uploads/');
// public/uploads/に$fileNameで挿入
$file->move($target_path, $fileName);
}else{ // 画像がない場合は空 $fileName = ""; } // タイトルを取得 $title = $request->title; // 本文を取得 $body = $request->body; \DB::beginTransaction(); try{ // データベースに保存 Blog::create([ "title" => $title, "body" => $body, "image" => $fileName ]); \DB::commit(); } catch(\Throwable $e){ \DB::rollback(); abort(500); } \Session::flash('err_msg', 'ブログを登録しました。'); // ブログ登録に成功したらブログ一覧に返す return redirect (route('blogs')); }
投稿2021/03/17 10:49
総合スコア5
回答でもコード載せる場合はマークダウンで投稿しましょう。
回答も編集できます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。