使用vue和laravel将图像发送到API

Question

我正在尝试开发一个适当的组件，将头像图像上传到我的laravel后端。从查看组件的数据，它将其存储为基本64字符串，当我尝试将其发送到我的后端时，我无法存储该文件。当我使用php后端时，putFile工作得非常好。我看过一些网站，说你应该将ti转换为后端的图像，然后存储它。我已经尝试过各种格式，并且无法弄清楚如何解决这个问题。

 <template>
    <form @submit.prevent="upload" class="ks-form ks-settings-tab-form ks-general" method="POST" enctype="multipart/form-data"> <!-- ks-uppercase ks-light -->
        <h3 class="main-form-header">
            General
        </h3>
        <div class="manage-avatar group">
            <img class="avatar" :src="(this.image == '')? this.image :this.image" width="100" height="100">
            <div class="manage-avatar-body">
                <div class="manage-avatar-body-header">Your Avatar</div>
                <div class="manage-avatar-body-description">
                    A square image 100x100px is recommended
                </div>

                <div class="manage-avatar-body-controls">
                    <input  name="avatar" type="file" v-on:change="onFileChange">
                </div>

                <div class="manage-avatar-body-controls">
                    <button type="submit" class="btn btn-primary">
                        <span class="la la-upload ks-icon"></span>
                        <span class="text">Upload Image</span>
                    </button>
                </div>

            </div>
        </div>
    </form>
</template>

<script>
    export default {
        data(){
            return{
                image: ''
            };
        },
        mounted() {
            console.log('Component mounted.')
        },
        methods:{
            onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },
            createImage(file) {
                let reader = new FileReader();
                let vm = this;
                reader.onload = (e) => {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
            },
            upload(){
                let formData = new FormData();
                formData.append("image", this.image);
                axios.post('/api/avatar', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {
                    console.log(response)
                });
            }
        }
    }
</script>



    //vue route
    public function avatar(Request $request)
    {
        $user = User::find(Auth::id());
        $path = Storage::putFile('avatars', new File($request->get('image')));

        $user->avatar_url = $path;
        if ($user->save()) {

        }
        //return response()->json(['file' => $request->get('image')]);
//        $validator = Validator::make($request->all(), [
//            'avatar' => 'required'
//        ]);
//        if ($validator->fails()) {
//            return response()->json(['errors' => $validator->errors()]);
//        } else {
//
//            if ($user->save()) {
//                //return redirect()->route('user_profile_settings');
//            }
//        }
    }