Vuejs/laravel 图片上传接收空数组

Question

我在 stackoverflow 上看了很多问答，但我不知道我做错了什么。

我正在建立一个网上商店（以改进我的编码），目前正在处理添加产品位。

这个想法是我可以添加一个产品，它可以有多个“产品”。例如，一件 T 恤是一种产品，但同一件 T 恤可以是红色/绿色小/中号，并且有自己的库存。

Vue 组件中的 HTML

<label class="btn-bs-file btn  btn-primary">
    Add picture
    <input type="file" multiple="multiple" @change="onFileChange($event, index)"/>
</label>
<div v-for="image in form.products[index].files" :key="image.id">
    <img :src="image.preview" />
</div>

JS

onFileChange(e, index) {
    var files = e.target.files || e.dataTransfer.files;
    if (!files.length)
        return;
    this.createImage(files[0], index);
},
createImage(file, index) {
    var reader = new FileReader();
    var vm = this

    var formData = new FormData()
    formData.append('file', file)

    reader.onload = (e) => {
        vm.form.products[index].files.push({
            file: formData,
            preview: e.target.result
            });
    };
    reader.readAsDataURL(file);
},

submit: function() {
    let vm = this
    this.$api.post('products', this.form, 
        {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(res => {
            console.log(res.data)
            // vm.upload(res.data)
        })
        .catch(error => {
            this.message('error', error, 'Error')
            console.log(error)
        })
},

PHP

public function store(Request $request)
{

    return response()->json($request->all());
}

这是结构（和响应）。如您所见，该文件是一个空数组，我想要这里的实际文件。

{
  "name": "Random Name",
  "brand": null,
  "description": null",
  "categories": [],
  "note": null,
  "products": [
    {
      "attributes": [],
      "color": "random",
      "state": "active",
      "price": "12",
      "files": [
        {
          "file": [],
          "preview": "data:image/png;base64,"
        }
      ]
    }
  ]
}

当我查看浏览器（vuejs 插件）时，它向我显示了以下内容：

所以我猜 formData 就在那里，但我不确定这是否是一种正确的方法，以及如何在后端获取 formData。

（我已经在这里工作了 10 多个小时，我在后端和前端都尝试了很多不同的东西，这里不一一列举..）