Question

我试图在laravel中使用axios post请求提交表单。在这种形式中，我有3个字段，名称，年龄和名为image的文件。

这是表格

<form action="{{route('forms.store')}}" method="post" enctype="multipart/form-data">
            @{{name}}
            @csrf
        <span v-if="errors.name">@{{errors.name[0]}}</span>
                <label for="name">Name:</label>
                <input type="text" name="name" id="name" v-model="name">
                <span v-if="errors.age">@{{errors.age[0]}}</span>
                <label for="age">Age:</label>
                <input type="text" name="age" id="age" v-model="age">
                <label for="image">Image:</label>
                <span v-if="errors.image">@{{errors.image[0]}}</span>
                <input type="file" name="image" id="image" @change="imageChanged">
                <button @click.prevent="submitForm">Submit</button>
            </form>

这是我的vueJs代码：

    const app = new Vue({
    el: '#app',
    data:{
        name:'',
        age:'',
        image:'',
        errors:{}
    },
    methods:{
        imageChanged(e){
        app.image = e.target.files[0]
        console.log(e.target.files[0]);
        },
        submitForm(){
            const config = { headers: { 'Content-Type': 'multipart/form-data' } };
            const fd = new FormData(this.$data);
            fd.append('image',this.image);
        axios.post('{{route('forms.store')}}',this.fd,config).then((response)=>{

                console.log(response.data);
        }).catch((error)=>{
            //console.log(error.response.data);
            this.errors = error.response.data.errors;
        })
        }
    }
});

这是我的控制器

  public function store(Request $request)
{

    $this->validate($request, [
        'name' => 'required',
        'age' => 'required',

    ]);

    if ($request->hasFile('image')) {
        $image = $request->file('image');
        return $ext = $image->extension();
    } else {
        return "NOT OK";
    }
}

所以我在这里验证姓名和年龄。但我的问题是当我填写表格并提交表格时，它会发回需要名称和年龄字段的错误。

我在哪里做错了以及如何在控制器中接收这些数据。提前谢谢。

Answer 1

我相信你的代码在这一部分是错误的。变化：

   axios.post('{{route('forms.store')}}',this.fd,config)

为：

   axios.post('{{route('forms.store')}}',fd,config)

在填写所有菲尔兹laravel发送＆＃39; required＆＃39;错误

1 个答案: