0

問題
画像を表示は出来た。
データとして、sqlのデータに保存ができていない。
確認で、抽出工程を確認すると画像を指定してあげるとできていた。

目標
laravelで画像を非同期処理でファイルから選択して表示させたい
また、他ファイルでも表示できるようにする

コメントアウトしてる方、してない方どちらも試しているが表示されない

blade

<div id="image">
    <div id="img">
       <img id="preview" width="200" class="img-thumbnail" alt="スノボー">
    </div>  
     <input type="file" id="myImage" name="image" accept="image/png, image/jpeg" />
</div>

Controller

public function store(SnowRequest $request)
     {
        $snow = new Post();

        if($request->hasFile('image')) {
            $snow->image = $request->file('image')->store('public/image');
            $snow->image = $request->image->store('');
        } else {
            $snow->image = null;
        }


         \DB::beginTransaction();
         try {
             // 投稿登録
             $this->snow->InsertSnow($request);
             \DB::commit();
         } catch(\Throwable $e) {
             \DB::rollback();
             abort(500);
         }
         
         \Session::flash('err_msg', '投稿を登録しました。');
         return redirect()->route('snows');
     }

JavaScript

   $("#myImage").on("change", function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview").attr("src", e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
   });

補足として、$snowは、sqlデータを格納している。
他、足りないことあればコメントお願いします。

3 件の回答 3

2

単純に画像を表示しようとしている<img>要素が、おそらくidとしてpreviewを指定すべきところがsrcになってしまっているように見えます。

  <img src="(適当なURL)" id="preview" width="200" class="img-thumbnail" alt="スノボー">
1
  • 修正しました。コメントありがとうございます。 Commented 2022年7月14日 3:51
2

img 要素の src="preview" が間違っていて id="preview" に直さないと getElementById('preview') でも $("#preview") でも取得できません。そこを直した上で、以下のようにしてはいかがですか?

(1) input type="file" で画像ファイルが選択されたタイミングで、FileReader に readAsDataURL メソッド を使って選択された画像ファイルを読み込む。

(2) readAsDataURL は非同期で動くので、読み込み完了のイベントを待ってリスナで処置する必要がある。readAsDataURL で読み込みが完了すると onloadend イベントが発生するので、それにリスナをアタッチし、そこで下の (3) の処置を行う。

(3) FileReader の result プロパティ を使って、読み込んだ画像ファイルを Data url 形式("data:image/jpeg;base64, ..." という文字列)で取得し、それを image オブジェクトの src 属性に設定する。

4
  • コメントありがとうございます。やってみます。 Commented 2022年7月14日 4:12
  • 分からないことが出てきたら聞いてください。
    – WebSurfer
    Commented 2022年7月14日 5:57
  • 誠にありがとうございます。 質問内容を変更したのでご確認頂けると幸いです。 Commented 2022年7月14日 7:14
  • 1
    最初の質問とは話がまるっきり変わってきていますけど、そういうのは最初の質問を見て考えてくれた人の時間と労力を無駄にする行為で、大変失礼だと思いませんか?
    – WebSurfer
    Commented 2022年7月14日 13:17
0

Controllerからmodelに下記を移行した。
移行の際に、InsetStoreを作成した。
中に、
model

 public function InsertStore($request)
    {
    $snow = new snow();
    
    $snow->image = $request->file('image')->store('public/image');
     snow->image = $request->image->store(''); 
     $image = new snow;
     $image->title = $request->title;
     $image->content = $request->content;
     $image->image = $snow->image;
     $image->save();
    }

Controller
InsertSnowをInsertStoreに変更

記載していないが、
form タグ内にenctype="multipart/form-data"を追加

コメントを頂いた方、本当にありがとうございました。

1
  • 最初の質問とは話がまるっきり変わってきていますけど、そういうのは最初の質問を見て考えてくれた人の時間と労力を無駄にする行為で、大変失礼だと思いませんか?
    – WebSurfer
    Commented 2022年7月14日 23:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。