Javascript FormData对象未接收文件

我正在尝试创建一个阿凡达编辑器后，建立一个论坛视频系列

我在拉威尔5.8.34

handleFileUpload（e）方法中的console.log显示上传的文件

上载的图像将显示在页面上

方法#persist（file）#中的console.log显示一个空对象

数据格式数据{}

上载不会持续

我的控制器方法：

public function avatar_upload($id)
    {
        $validate = request()->validate([
            'avatar' => ['required', 'image']
        ]);

        $emp = Employee::with('user')->where('user_id', $id)->first();
        $avatar = $emp->user->firstName . $emp->user->lastName . '.png';

        Storage::disk('spaces')
            ->putFileAs('avatars', request()->file('avatar'), $avatar, 'public');

        $emp->avatar = $avatar;
        $emp->save();

        return response([], 204);
    } // end function

我的组成部分：

<template>
    <div>
        <div class="text-center mb-4">

            <div class="flex justify-center font-thin text-grey-dark text-2xl">
                {{user.office}}
            </div>

            <div class="text-center">
                <img class="relative rounded-lg"
                    :src="avatar">
            </div>
            <form @submit.prevent="handleFileUpload"
                  enctype="multipart/form-data"
                  v-if="canEdit">
                <input
                    type="file"
                    name="avatar"
                    ref="file"
                    accept="image/png"
                    class="tw-input"
                    @change="handleFileUpload">
            </form>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        name: 'AvatarReplace',
        data() {
            return {
                canEdit: true,
                avatar: this.user.avatar
            };
        },
        props: ['user'],
        methods: {
            handleFileUpload(e) {
                if(! e.target.files.length) { return; } // end if

                let file = e.target.files[0];
                console.log('FILE', file);

                let reader = new FileReader();

                reader.readAsDataURL(file);

                reader.onload = e => {
                  this.avatar = e.target.result;
                };

                this.persist(file);
            },
            persist(file) {
                let data = new FormData();

                data.append('avatar', file);
                console.log('DATA', data);

                let path = `/api/staff/avatar_upload/${this.user.id}`;
                axios.post(path, data)
                    .then((rsp) => {
                        //console.log(rsp);
                        //this.$toastr.s('File Uploaded');
                    });

            }
        }
    };
</script>

{{user.office}
导出默认值{
名称：'AvatarReplace'，
数据（）{
返回{
是的，
阿凡达：this.user.avatar
};
},
道具：['user']，
方法：{
handleFileUpload（e）{
if（！e.target.files.length）{return；}//end if
让file=e.target.files[0]；
log（'FILE'，FILE）；
let reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=e=>{
this.avatar=e.target.result；
};
这个.persist（文件）；
},
持久化（文件）{
let data=new FormData（）；
data.append（'avatar'，文件）；
console.log（'DATA'，DATA）；
let path=`/api/staff/avatar_upload/${this.user.id}`；
axios.post（路径、数据）
。然后（（rsp）=>{
//控制台日志（rsp）；
//这是.$toastr.s（'上传的文件'）；
});
}
}
};

这不是一个正常的表单，让axios知道

内容类型

是

多部分/表单数据

axios.post(path, data, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
}).then((response) => {
   //
});

---

记录

FormData

对象将始终生成空对象。要检查其条目，应使用spread运算符记录，或使用

FormData

的方法检查值