代码之家 › 专栏 › 技术社区 › Marcus Christiansen

使用vue.js将多个文件发送到laravel

axios vue.js laravel php javascript

Marcus Christiansen · 技术社区 · 6 年前

我使用vue.js中的多步骤表单将多个文件发送到laravel后端。表单允许用户向数据库添加多个用户。每个用户都需要一个与之一起上载的文件。

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

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

当用户提交表单时,我会将所有单独的表单数据(包括files数组)添加到一个新的form data()对象中,如下所示:

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将表单数据发送到我的LaaFlash后端。

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';
})

在我的房间里 业务控制器 然后我想 Log::debug($_FILES) 看看哪些文件被发送了,但我得到的只是一个空数组。

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

我已经检查了我发送的邮件头是否包括 'multipart/form-data' 我正在将所有表单数据追加到新的form data()中,但我无法理解为什么服务器接收到空的$u文件数组。

更新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

1 回复 | 直到 6 年前

ysfkaya 6 年前

试试这个案子:

var objectToFormData = function (obj, form, namespace) {

var fd = form || new FormData();
var formKey;

for (var property in obj) {
    if (obj.hasOwnProperty(property)) {

        if (namespace) {
            formKey = namespace + '[' + property + ']';
        } else {
            formKey = property;
        }

        // if the property is an object, but not a File,
        // use recursivity.
        if (typeof obj[property] === 'object' && !(obj[property] instanceof File)) {

            objectToFormData(obj[property], fd, property);

        } else {

            // if it's a string or a File object
            fd.append(formKey, obj[property]);
        }

    }
  }

  return fd;

};

参考: objectToFormData

Axios:

 axios.post('/businesses', fd, {
          transformRequest: [
             function (data, headers) {
                  return objectToFormData(data);
              }
          ]
 })
.then(response => {
   console.log(response);
   this.completeButton = 'Completed';

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