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多个小时，在后端和前端都尝试了很多不同的方法，因此在这里无法列出。）

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

0 个答案: