Vue.jsからaxiosでlaravelにデータを送信するが、写真に関するデータ情報が送れない。

Question

Vue.jsとlaravelで画像複数枚投稿の編集を実装しています。編集する際に新規ではなく変更された写真については送信する写真の情報にedit_image_idを使って変更する(元の)写真を取得、更新処理をしようと思っています。

解決したいこと：　laravel側でedit_image_idを$imageの中のデータとして受け取りたい。

現状:
vueのdataformではedit_image_idが入っていることを確認出来ました。
しかし、laravel側で$imageの中にはedit_image_idの情報が入っていませんでした。

怪しいと感じる部分：
下にコードを載せましたが、自分がlaravelに送っている情報(img)と、実際にコントローラーで受け取っている情報($image)に違いがありました。この部分が怪しいと思うのですが、理解が乏しく解決できませんでした。

　　　　　　　data() {
              return {
                images: []
              }
            },
　　　　　　　　　
　　　　　　　　　　...省略

                const reader = new FileReader();
                reader.onload = (e) => {
                    edit_image.thumbnail = e.target.result;
                    edit_image.edit_image_id = img.id;
                    this.images.splice(i, 1, edit_image);
                };

                ...省略

                  dataform = new FormData();

                  this.images.forEach(function(img) {
                    if(img.thumbnail) {
                      dataform.append('images[]', img);
                    } else {
                      return false;
                    }
                  })
　　　　　　　　　　　...省略

                  let id = this.me_id
                  var array = ["http://127.0.0.1:8000/me/", id, "/update"];
                  let path = array.join('')
                  axios.post(path, dataform).then(res => {
                    console.log('done')
                  }).catch(function(error){
                    console.log(error)
                  })

foreach($request->images as $image) {
 var_dump($image); 
}

以下の２つの部分が中身のデータ情報です。
送信側,受け取り側

imgの中身(送信)

File {thumbnail: "data:image/jpeg;base64,/9j/4***Z", edit_image_id: 20, name: "5e0bf50ab91***", lastModified: 1561089569815, lastModifiedDate: Fri Jun 21 2019 12:59:29 GMT+0900 (日本標準時), …}
name: "5e0bf50ab91***"
lastModified: ****
lastModifiedDate: **
webkitRelativePath: ""
size: 500862
type: "image/jpeg"
thumbnail: "data:image/jpeg;base64,/9j/4**"
edit_image_id: 20 ここで取得できている
__proto__: File

$imageの中身(受け取り)

$image
=> Illuminate\Http\UploadedFile {#337
     path: "/private/var/folders/kj/jv_***",
     filename: "phpqHh5jN",
     basename: "phpqHh5jN",
     pathname: "/private/var/folders/kj/jv_***",
     extension: "",
     realPath: "/private/var/folders/kj/jv_***",
     aTime: 2020-07-14 21:18:57,
     mTime: 2020-07-14 21:18:57,
     cTime: 2020-07-14 21:18:57,
     inode: 20893833,
     size: 500862,
     perms: 0100600,
     owner: 501,
     group: 20,
     type: "file",
     writable: true,
     readable: true,
     executable: false,
     file: true,
     dir: false,
     link: false,
   }

下記の様に考えてみましたが、解決策が見つからない状態です。
$imageはfileオブジェクトとして存在している。
中身の情報を比較すると、送信した際にimgの情報がそっくりそのまま$imageに送られているわけじゃなさそう？

$image->edit_image_id こんな形で使うのを想定しています。

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

laravel 6.18
vue.js 2.6.11

Answer 1

$image->edit_image_id こんな形で使うのを想定しています。

できません。

勘違いされている点ですが、当該JSコードにおけるimgはFileオブジェクトです。JSの性質上、未定義のプロパティも追加こそ可能ですが、インタフェース外のプロパティを追加しても意味がありません。

FormDataでファイルを送信していますが、これにFileを渡した場合はペイロードに「フィールド名」「ファイル本文」「ファイル名」が載せられます。
これはmultipart/form-dataという形式で送信されますが、そのようなコードを書いたところでファイルに任意のヘッダを付加したりすることはできません。
一方で、FormDataにはファイル以外に文字列をペイロードに乗せることは可能なので、

if(img.thumbnail) {
  dataform.append('images[]', img);
  dataform.append('image_ids[]', img.id);
}

のようなことを行うことは可能ですので、そのようにすればLaravel側に対照するIDを渡すことはできなくはないでしょう。(ただしこれはFileに他の情報を入れるのを推奨するものではなく、適当なオブジェクトでラップすることをおすすめします。)

Comments

[tenlife]

返信が遅れてしまいました。申し訳ありません。
回答ありがとうございます。fileオブジェクトに追加はできないと言うことなんですね!とても勉強になります。
現在教えていただいた考え方を参考に進めていましたが、また詰まってしまったので新しく質問を立てました！
ご確認頂けると幸いです。

https://teratail.com/questions/278016?modal=q-comp

[hina]

一応補足しておくと、
> The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.
です。つまり、`append`で渡せるのはBlobやFile、または文字列です。(文字列以外のオブジェクトをそのまま渡しても`.toString()`されますので追加の質問のようなことになります。)私が例示してるのはあくまで、渡す際にパラメータを分け、それぞれにファイルやIDを分けて入れています。

そもそも1リクエストで済ませるのが最適とも限りませんが。(ファイルアップロード専用のエンドポイントを用意することがよくあります)

[tenlife]

返信遅れました。
説明を受けて再度、違う考え方で進めたところうまく実装することができました！

ありがとうございました。