Question

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

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="view_form_todo_task" model="ir.ui.view">
        <field name="name">To-Do Task Form</field>
        <field name="model">todo.task</field>
        <field name="arch" type="xml">
            <form string="To-Do task">
                <header>
                    <button name="do_toggle_button" type="object" string="Toggle Done" class="oe_highlight"/>
                    <button name="do_clear_done" type="object" string="Clear All Done"/>
                </header>
                <sheet>
                    <group name="group_top">
                        <group name="group_left">
                            <field name="name"/>
                        </group>
                        <group name="group_right">
                            <field name="is_done"/>
                            <field name="active" readonly="1"/>
                        </group>
                    </group>
                </sheet>
            </form>
        </field>
    </record>
    <record id="view_tree_todo_task" model="ir.ui.view">
        <field name="name">To-Do Task Tree</field>
        <field name="model">todo.task</field>
        <field name="arch" type="xml">
            <tree string="To-Do task shown">
                <field name="name"/>
                <field name="is_done"/>
            </tree>
        </field>
    </record>
    <record id="view_search_todo_task" model="ir.ui.view">
        <field name="name">To-Do Task Search</field>
        <field name="model">todo.task</field>
        <field name="arch" type="xml">
            <search>
                <field name="name"/>
                <filter string="Not Done" domain="[('is_done','=',False)]"/>
                <filter string="Done" domain="[('is_done','!=',False)]"/>
            </search>
        </field>
    </record>
</odoo>

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

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

在我的Laravel BusinessController 内，然后我想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 ( )，并且将所有表单数据附加到新的FormData（）中，但是我无法弄清楚服务器为什么接收到一个空的$ _FILES数组。

更新1： 如果我'multipart/form-data'，我得到：

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

Log::debug($request->all());

我收到以下错误：

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

Answer 1

尝试这种情况：

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

Answer 2

尝试更改此行：

 fd.append('files[' + i + ']', file);

对此：

 fd.append('files[]', file);

使用Vue.js将多个文件发送到Laravel支持

2 个答案: