Laravel惯性多部件表格数据

我想创建一个带有图片上传和其他输入数据的会员表格。我有一个带有输入文件和输入文本的表单，可以将其视为多部分数据。我使用的是Laravel 8和industry.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>

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

将

enctype=“多部分/表单数据”

添加到表单标签

您需要将图片移动到目录中。范例

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

---

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

假设您使用的是惯性0.8.0或更高版本，您可以使用惯性

表单

帮助程序。如有必要，这将自动将数据转换为

FormData

对象

将数据方法更改为：

data（）{
返回{
表格：这个。$INITORY.form({
图片：''，
名字：''，
中间名：“”，
姓氏：“”，
名称\分机：“”，
出生日期：''，
性别：''，
会籍日期：''，
})
}
}

以及

createMember

函数，用于：

createMember（）{
//为清楚起见缩写
this.form.post（“/member”）
}

更多信息：。如果需要将

FormData

从惯性<0.8.0迁移到当前版本，请参阅。

我试图添加enctype=“multipart/form data”，但仍然为空