Laravel惯性多部分表单数据

Question

我想创建一个需要上传图片和其他输入数据的会员表格。我有一个包含输入文件和输入文本的表单，这些文本被视为多部分数据。我正在使用 Laravel 8 和 Inertia.js.

这是我试过的方法：

在我的表格中，我有这样的：

<form action="/member" method="POST" @submit.prevent="createMember">                          
    <div class="card-body">
    <div class="form-group">
        <label for="exampleInputFile">Picture</label>
        <div class="input-group">
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="exampleInputFile" @input="form.picture">
            <label class="custom-file-label" for="exampleInputFile">Choose image</label>
        </div>
        <div class="input-group-append">
            <span class="input-group-text">Upload</span>
        </div>
        </div>
    </div> 
    <div class="form-group">
        <label for="exampleInputEmail1">First name</label>                               
        <input type="text" class="form-control" id="fname" placeholder="First name" v-model="form.firstname">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Middle name</label>
        <input type="text" class="form-control" id="mname" placeholder="Middle name" v-model="form.middlename">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Last name</label>
        <input type="text" class="form-control" id="lname" placeholder="Last name" v-model="form.lastname">
    </div>
    <div class="col-md-12">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Name ext</label>
        <input type="text" class="form-control" id="next" placeholder="Name extension" v-model="form.name_ext">
    </div>
    
    <div class="form-group">
        <label>Membership Date:</label>
        <div class="input-group date" id="reservationdate" data-target-input="nearest">
            <input type="text" class="form-control datetimepicker-input" id="mem_date" data-target="#reservationdate" v-model="form.membership_date"/>
            <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Date of Birth:</label>
        <div class="input-group date" id="reservationdate" data-target-input="nearest">
            <input type="text" class="form-control datetimepicker-input" id="date_of_birth" data-target="#reservationdate" v-model="form.date_of_birth"/>
            <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>

        <div class="form-group">
        <label>Sex:</label>
        <div class="radio-inline">
            <label class="radio radio-solid">
                <input type="radio" name="travel_radio" class="details-input" value="Male" v-model="form.sex"/> Male
                <span></span>
            </label>
            <label class="radio radio-solid">
                <input type="radio" name="travel_radio" class="details-input" value="Female" v-model="form.sex"/> Female
                <span></span>
            </label>
        </div>
    </div>
    
                                
    </div>
    <!-- /.card-body -->

    <div class="card-footer">
    <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

然后我尝试了像这样的 vue 和 inertia 实现：

export default {        

    props: [],

    components: {
        AppLayout,    
    },

    data() {
        return {
        form: {
            picture: '',
            firstname: '',
            middlename: '',
            lastname: '',
            name_ext: '',
            date_of_birth: '',
            sex: '',
            membership_date: '',              
        }
        }
    },

    methods: {
        createMember() {
        this.$inertia.post('/member', this.form, {
            _method: 'put',
            picture: this.form.picture,
            onSuccess: () => {
            console.log('success');
            // $('.toastrDefaultSuccess').click(function() {
            //   toastr.success('Successfully Added');
            // });
            },
            onError: (errors) => {
            console.log(errors);
            },
        })
        }
    }
}

然后从我的后端，我尝试 dd 请求并从图片中得到空值：

public function store(MemberPost $request) {
    dd($request);
}

Answer 1

添加enctype="multipart/form-data"形成标签

并且您需要将图片移动到目录。例子

$name = $file->getClientOriginalName();
$file->move('uploads/posts/',$name);

抱歉，我不知道如何将此代码实现到惯性。

Answer 2

假设你使用的是inertia 0.8.0或以上，你可以使用inertia form helper。如有必要，这将自动将数据转换为 FormData 对象。

将您的数据方法更改为：

data() {
    return {
        form: this.$inertia.form({
            picture: '',
            firstname: '',
            middlename: '',
            lastname: '',
            name_ext: '',
            date_of_birth: '',
            sex: '',
            membership_date: '',              
        })
    }
}

和 createMember 函数：

createMember() {
    // abbreviated for clarity
    this.form.post('/member')
}

更多信息：docs. If you need to migrate FormData from inertia < 0.8.0 to a current version, see this page。

Answer 3

这种方式适合我

 this.$inertia.post('/member', this.form)

Laravel惯性多部分表单数据

Laravel inertia multi-part form data

file-upload

inertiajs

laravel

vue.js