質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

1回答

1884閲覧

vue.jsからaxiosを使って送信した値をlaravelで受け取ると"[object Object]"になってしまう。

tenlife

総合スコア70

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2020/07/15 21:33

編集2020/07/16 21:41

laravel,vue.jsを使い画像複数枚投稿の編集機能を実装しています。
現在はVue.jsでaxiosを使ってlaravelにデータを渡す処理をしているところです。

やりたいこと: 配列boxをforeachで回して取得した中身をlaravel側に送りたいです。

現状: laravel側で値を受け取ると"[object Object]"になってしまいます。しかし追記にもありますが、image,edit_id単体で入れると正しく入る。

fileオブジェクトとedit_idを持った要素がboxの中に配列の形で入っている状態です。

           data() {     return {     box: []     }     },              ...省略            let test = {  image: edit_image,  edit_id: img.id  }  this.box.push(test)            ...省略            dataform = new FormData();            this.box.forEach(function(ele) { dataform.append('box[]', ele); })            ...省略 axios.post(path, dataform).then(res => { console.log('done') }).catch(function(error){ console.log(error) })
Laravel側に送られてくる値です $request->box => [ "[object Object]", "[object Object]", ] $request->box[0] => "[object Object]"

this.boxの中身
this.boxの中身
eleの中身
eleの中身

試したこと
https://qiita.com/nicopinpin/items/cb3eb74440299e2e84f7

fileオブジェクトとedit_idを持った要素をlaravel側で受け取ることができません。
送信の仕方に問題があるかと思いましたが、解決策が見つからない状態です。

どなたかお分かりになる方居ましたら、知恵を貸していただきたいです。
よろしくお願いします。

以下追記です。

console.log(dataform.getAll('box[]'))の結果です。
dataformの中身で既にobjectになっているので、やはりappendの部分が怪しいかと思います。
dataformのboxの中身

こんな感じで渡すと下記の写真の様になります。値は入るが、1つのオブジェクトにまとめて入れることが出来ない、といった感じです。 dataform.append('box[]', ele.edit_id); dataform.append('box[]', ele.image);

別々で渡すと

dataform.append('box', JSON.stringify(ele)); 上記で送りましたが、json_decodeで正しく受け取れません。文字列が多すぎて、カラム名を選択して呼べない状態でした。(自分の理解力が低く正しくできていない可能性あり)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

boxと言う箱を作って、写真のファイル名を追加する。編集の場合には追加で元の写真のidを追加しておく。
下記の様に実装するといけました。

data() { return {, box: [], } },           // boxに追加 let test = { file_name: edit_image.name, edit_id: img.id }           ...省略 this.box.push(test)            this.box.forEach(function(ele, i) { let koko = JSON.stringify(ele) dataform.append('box[]', koko); })

fileオブジェクトは他の情報と一緒におくれないんですね。学びになりました。

投稿2020/07/18 03:11

tenlife

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問