vueからlaravelに写真のデータを送ると中身が[object File]になってしまいます。

Question

vue.jsからlaravelコントローラー側にfileデータを渡したいと思っています。(複数枚)
axiosを使わずに実装する形で進めています。input要素にname属性でvalueをバインドすればblade側で送信された時に取得出来るのでは？と考えました。データは飛んでいるみたいですが、中身が[object File]になってしまいます。

解決したいこと：　axiosを使わずに写真のfileデータをlaravelに送りたいです。

現状：　データはコントローラーに送られますが、中身が[object File]になってしまいます。

怪しいと思うところ：　this.images配列がObserverになってしまっているのが気になります。

<input type="hidden" name="images" :value="images">
  data() {
    return {
      images: []
    }
  },
..省略
    createImage(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        file.thumbnail = e.target.result
        this.images.push(file)
      }
　　　// console.log(this.images)
      reader.readAsDataURL(file)
    }

<form method="POST" action="{{ route('items.store') }}" enctype="multipart/form-data">
                      @csrf
                      <image-create></image-create>
                      <button type="submit" class="btn btn-primary">
                        {{ __('投稿する') }}
                      </button>
</form>

    public function store(Request $request)
    {
        dd($request);
    }

dd($request)の結果

console.logの表示内容

試したこと
https://qiita.com/Ancient_Scapes/items/ecd293a7444283cab706
上記を参考に新しい配列を作り直して送ろうとしましたが、this.imagesがObserverになってしまっているので、最初の一枚目がカウントされずでした。

dataにtest配列を設置
Array.prototype.forEach.call(Object(this.images), value => {
  this.test.push(value)
})

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
この辺りも確認しましたが、今は送信する場合の処理なのであまり関係ないのでは、と判断しました。

fileデータをコントローラーにうまく飛ばせずに作業が止まってしまいました。axiosで実装していた時はFormDataなどを使っていたのですが、今回はaxiosを使っていないのでその違いに対応できていません。

お分りなる方、参考になるサイトなどありましたら是非教えていただきたいです。
よろしくお願い致します。

laravel 7.x
vue.js 2.6.11

Answer 1

結論

その挙動は正常のはずです。

pngなら

    public function store(Request $request)
    {
       return "<img src=\"data:image/png;base64,\"".base64_encode($request['images'][0])."\" />";
    }

Comments

[kyoya0819]

（このコードで確認できるはず。
質問者さんの挙動は正常なはず。

[kyoya0819]

画像をbase64エンコードして、img要素で表示するコードです。

[tenlife]

回答ありがとうございます！
回答を元に以下を作成しました。

$image_list = explode(',', $request->images);
return "<img src=\"data:image/png;base64,\"".base64_encode($image_list[0])."\" />";

上記を実装したところ写真は表示されず空の時の写真マークとsrcには作成された文字列がありました。(これで正しい挙動でしょうか？)

下記のような形でbase64_encodeを使用して保存するという作業をしてみましたが、file_get_contentsでfailed to open stream: No such file or directoryのエラーが出てしまいます。
https://qiita.com/RitaChan/items/d59001430f50789c570f

base64_encodeを使用して画像を保存する参考になる考え方、サイトなど教えていただきたいです。

[tenlife]

https://teratail.com/questions/106817
https://www.366service.com/jp/qa/39302b46d20054bcac5fb341d0757fad
https://qiita.com/naoqoo2/items/029d1761f48d5e739dd6
上記を参考にすると、データベースに保存するところまでいけました。

正しい挙動だったんですね！base64の勉強になります。
回答ありがとうございました！