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 和惯性实现：

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 请求并从图片中得到 null：

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

Answer 1

这种方式适合我

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

Answer 2

假设您使用的是惯性 0.8.0 或更高版本，则可以使用惯性 form 助手。如有必要，这会自动将数据转换为 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。如果您需要将 FormData 从惯性 this page。

Answer 3

将enctype="multipart/form-data" 添加到表单标签

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

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

对不起，我不知道如何将这段代码实现为惯性。