axios/laravel/formdata post请求为空。

Question

我想上传一些文件，但是当我使用axios提交时，在laravel中我的formdata请求为空。

vuejs: uploader.vue

filesChange(e) {
    const fileList = e.target.files;
    const formData = new FormData();
    if (!fileList.length) return;
    for (let i = 0; i < fileList.length; i += 1) {
      console.log(fileList[i]);
      formData.append('files', fileList[i], fileList[i].name);
    }
    this.save(formData);
  },

从控制台输出，所有文件都被循环并添加到formData中。

save(formData) {
    photosApi.storePhotos(formData, this.galleryId).then((response) =>     {
        console.log(response);
    }).catch((error) => {
        console.log(error);
    });
},

Vue.js：photosApi.js

storePhotos(formData, id) {
    return axios.post(`api/photo/${id}`, formData);
},

当我检查我的API调用时，我看到这个：

Laravel: api.php

Route::post('/photo/{id}',  'PhotoController@store');

laravel: PhotoController.php

public function store(Request $request, $id)
{
    return $request->all(); 
}

我的响应返回值只是空的...

我做错了什么？

- Gregor Voinov

---

尝试返回JSON响应。 - Parth Shah

@pdshah3690 也可以使用 return response()->json($request->all()); 来返回空的响应。 - Gregor Voinov

通过 print_r($request->all());，您可以检查数据。@ParthShah - Gregor Voinov

Answer 1

我终于解决了 :)

第一个问题出在这行代码上

formData.append('files', fileList[i], fileList[i].name);

append总是覆盖了最后一个“files”条目……（我以为它像push一样工作）

所以第一个修复方案是

formData.append(`file${i}`, fileList[i], fileList[i].name);

不要使用以查看数据

return $request->all();

请改用

而不是

。

print_r($request->all());

现在，当您检查API调用时，您可以看到一些有用的东西。

现在很容易

$data = $request->all();
foreach ($data as $key => $file) {
    $file->move('/public/images', $file->getClientOriginalName());
};

所有我的文件都存储在我的文件夹中 ;)

更新： 我发现，如果我用 "[]" 写文件，那么我也可以得到数据数组

for (let i = 0; i < fileList.length; i += 1) {
    formData.append('files[]', fileList[i], fileList[i].name);
}

在我的控制器中，我使用这行代码访问我的文件，但是没有使用“[]”。

$files = $request->file('files');

- Gregor Voinov