Загрузка изображения Vuejs / laravel при получении пустого массива

Question

Я рассмотрел множество вопросов и ответов о стекопереработке, но не могу понять, что я делаю неправильно.

Я создаю интернет-магазин (для улучшения моего кодирования), в настоящее время работаю над Add Productбит.

Идея в том, что я могу добавить продукт, который может иметь несколько «продуктов».Например, футболка - это один товар, но та же футболка может быть красного / зеленого цвета, малого / среднего размера, и у них есть собственный запас.

HTML в компоненте Vue

<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 часов, я пробовал много разных вещей как в бэкэнде, так и во внешнем интерфейсе, слишком много, чтобы перечислять здесь ..)