javascript - 使用 Vue.js 向 Laravel 发送多个文件

问题描述

我在 Vue.js 中使用多步骤表单将多个文件发送到 Laravel 后端。该表单使用户能够将多个用户添加到数据库中。每个用户都需要一个文件与它一起上传。

文件最初使用 Vuex 以状态存储。每个文件都被推送到store.js中的文件数组

当用户提交表单时，文件数组如下所示：

当用户提交表单时，我将包括文件数组在内的所有单个表单数据添加到新的 FormData() 对象中，如下所示：

let fd = new FormData();
// append each file
for( var i = 0; i < store.state.files.length; i++ ){
  let file = store.state.files[i];

  fd.append('files[' + i + ']', file);
  console.log(file);
}
// append rest of form data
fd.append('appointments', store.state.appointments);
fd.append('business_details', store.state.business_details);
fd.append('business_names', store.state.business_names);
fd.append('directors', store.state.directors);
fd.append('share_amount', store.state.share_amount);
fd.append('shareholders', store.state.shareholders);

添加完所有表单数据后，我使用 Axios 将表单数据发送到我的 Laravel 后端。

axios.post('/businesses', fd, {
  headers: {
    'content-type': 'multipart/form-data'
  }
})
.then(response => {
   console.log(response);
   this.completeButton = 'Completed';

})
.catch(error => {
   console.log(error)
   this.completeButton = 'Failed';
})

然后，在我的 Laravel BusinessController中，我想Log::debug($_FILES)查看发送了哪些文件，但我得到的只是一个空数组。

[2018-10-05 16:18:55] local.DEBUG: array (
)

我已经检查了我发送的标头是否包含'multipart/form-data'，并且我将所有表单数据附加到 new FormData() 但我无法弄清楚为什么服务器会收到一个空的 $_FILES 数组。

更新1： 如果Log::debug($request->all());我得到：

如果我尝试像这样将对象存储在该文件中：

foreach ($request->input('files') as $file) {
  $filename = $file->store('files');
}

我收到以下错误：

[2018-10-06 09:20:40] local.ERROR: Call to a member function store() on string

标签： javascriptphplaravelvue.jsaxios

javascript - 使用 Vue.js 向 Laravel 发送多个文件

问题描述

解决方案

推荐阅读