Отправка изображения в API с помощью vue и laravel - PullRequest
Новая
       6

Отправка изображения в API с помощью vue и laravel

0 голосов
/ 26 мая 2018

Я сейчас пытаюсь разработать соответствующий компонент, который загружает изображение аватара в мой бэкэнд 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');
//            }
//        }
    }
...