$ request-> hasFile ('profile_picture') возвращает пустой массив с формой Vue

Question

У меня есть эта форма

<v-form enctype="multipart/form-data">
    <div class="container-2 mx-2">
    <!-- Personal information -->
        <v-divider></v-divider>
            <v-row>
                <v-col cols="12" sm="12" md="4">
                    <v-text-field v-model="person.first_name" id="first_name" name="first_name" label="First Name" color="black"></v-text-field>
                </v-col>

                <v-col cols="12" sm="12" md="4">
                    <v-text-field label="Last Name" v-model="person.last_name" id="last_name" name="last_name" color="black"></v-text-field>
                </v-col>

          <v-divider></v-divider>
              <p class="mt-2">Profile Picture</p>
                  <v-row>
                      <v-col cols="12" sm="12" md="6">
                          <v-file-input label="File input" color="black" prepend-icon="mdi-camera" v-model="userAvatar"></v-file-input>
                       </v-col>
                  </v-row>

                  <div class="right-align">
                      <v-btn color="yellow" class="black-text" @click="update()">Submit</v-btn>
                      <v-btn color="red accent-3" class="black-text">Back</v-btn>
                   </div>
                   <br>
       </div>
</v-form>

<script>
export default {
    data() {
        return {
            person_id = 1,
            //Data
            person: {
                first_name: '',
                last_name: '',
            },
            userAvatar: undefined,

        }
    },

    methods: {
        update() {
            const params = {
                first_name: this.person.first_name,
                last_name: this.person.last_name,
                profile_picture: this.userAvatar,
            }
            console.log(params);

            axios.put(`/profile/${this.person_id}`, params)
                .then(res => {
                    console.log(res.data);
                }).catch(e => {
                    console.log(e);
                })

        },


    }
}
</script>

Когда я печатаю параметры в консоли и загружаю картинку, она показывает profile_picture как объект File, но в бэкэнде он говорит мне, что это пустой массив.

ProfileController

    public function update(Request $request, $id)
    {
        //Person
        $person = Person::find($id);

        //Avatar
        $name = null;
        $image = null;

        if ($request->hasFile('profile_picture')){
            $file = $request->file('image');
            $name = $person->id();
            $file->move(public_path().'/img/uploads/avatars', $name);

            //Image
            $image = new Image();
            $image->path = $name;
            $image->save();
        }

        //Profile
        $person->first_name = $request->first_name;
        $person->last_name = $request->last_name;
        if ($image)
            $person->image_id = $image->id;
        $person->save();
    }

Проблема в строке $request->hasFile, когда я пытаюсь напечатать $request->profile_picture в журналах Laravel, она выглядит как пустой массив, но в консоли javascript свойство profile_picture отображается как объект файла, почему это происходит? Есть ли способ, как я мог это исправить?

Answer 1

Попробуйте отправить файл как FormData

let params = new FormData();

params.append('first_name',this.person.first_name);
params.append('last_name',this.person.last_name);
params.append('profile_picture',this.userAvatar);

Используйте params для отправки на сервер.

Добавьте заголовок multipart/form-data, если требуется

let headers = {
    'Content-Type': 'multipart/form-data',
};