Home / Questions / 157285
Accepted
Felipe
Asked: 2020-04-19 21:07:37 +0800 CST 2020-04-19 21:07:37 +0800 CST

Как загрузить изображение из VueJS в Laravel с помощью Axios?

  • 772

Я должен изменить изображение профиля пользователя, я использую для этой цели Vuejs, проблема в том, что он передает мне изображение, base64и когда я делаю декодирование в методе myProfileконтроллера, это просто или он сохраняет номер 1 в аватарке поле таблицы userили просто передать его null.

профиль.vue

<template>
   <input type="file" name="image" @change="getImage" accept="image/*">
   <img :src="avatar" class="img-circle" width="150" />
   <a href="" v-show="loaded" class="btn btn-success" @click.prevent="updateAvatar">Upload</a>

</template>
<script>
   props: ['auth'],
data() {
    return {
        user: {},
        errorss: {},
        showMe: false,
        loaded: false,
        avatar: '',
    }
},
mounted() {
    this.user = JSON.parse(this.auth);
    this.avatar = this.user.avatar;
},
   getImage(e){
        let image = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(image);
        reader.onload = e => {
            this.avatar = e.target.result;
        }
        this.loaded = true;
    }, 
    updateAvatar(){
        let urlAvatar = '/dashboard/avatar';
        //let value = new FormData();
        //value.append('image', this.avatar);
        const value = {
                'image': this.avatar
            }

        axios.put(urlAvatar, value)
            .then((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationSuccess(title, body);
            })
            .catch((e) => {
                console.log(e.response.data);
            })
    },
</script>

Примечание: когда я занимаю FormData()аватарку, она оказывается пустой

myProfileЯ уже внес столько изменений в этот метод , что в конце концов оставляю его таким, чтобы посмотреть, как они могут меня направить.

мой профиль (пользовательский контроллер)

public function myAvatar(Request $request)
{
    $file_data = $request->image;
    $avatar = Storage::putFile('public/defaults/users/avatar/', base64_decode($file_data));

    $userAvatarUpdate = User::find(Auth::user()->id);
    $userAvatarUpdate->avatar = $avatar;
    $userAvatarUpdate->update();

    return response()->json([
            'status' => 'Muy bien!',
            'msg' => 'Tu foto de perfil se actualizo.',
        ], 200);

}

Я видел несколько руководств, но еще не нашел решение, которое соответствует тому, что мне нужно.

Любые идеи? Я использую Laravel 5.6, Vuejs 2и Axios.

laravel

1 Answers

  1. Best Answer

    Чтобы загрузить изображения с axiosпомощью метода by PUT, вы можете «обманывать» и отправлять их postиз vue, но в Laravel доступ к PUT. (могут быть лучшие способы сделать это, но это остается для исследования :))

    Первой рекомендацией для хранения изображений было бы продолжать использовать, storageно, как я заметил, он пытается хранить непосредственно в общей папке проекта, что не совсем правильно, но для примера мы продолжим с этой конфигурацией.

    Для этого в файле хранилища по config\filesystems.phpумолчанию вы должны изменить значение папки хранилища для локального ключа, используя это, чтобы оно было равно папке проекта, и в этом мы указываем Laravel, что будет папкаdriverlocalrootpublic_pathpublicdefaults

    'local' => [
   'driver' => 'local',
   'root' => public_path('defaults'), // miproyecto.com/public/defaults/
],

    В контроллере он мог просто остаться.

    public function myAvatar(Request $request)
{
    // Verificamos si hay un file con nombre avatar
    if ($request->hasFile('avatar')) {
        // Si es así , almacenamos en la carpeta public/avatars
        // esta estará dentro de public/defaults/
       $url = $request->avatar->store('users/avatar');
        $userAvatarUpdate = User::find(auth()->id());
        /** Áctualización y 
         return JSON*/
    }
    return "Noo Llego una imagen";
}

    VueJs ( объяснение кода включено)

    <template>
    <div>
        <input type="file" name="image" @change="getImage" accept="image/*">
        <button @click="updateAvatar">Subir Imagen</button>
    </div>
</template>
<script>
    export default {

        data(){
            return {
                imagen : null,
            }
        },
        methods  : {
            getImage(event){
                //Asignamos la imagen a  nuestra data
                this.imagen = event.target.files[0];
            },
            updateAvatar(){
                //Creamos el formData
                var data = new  FormData();
                //Añadimos la imagen seleccionada
                data.append('avatar', this.imagen);
                //Añadimos el método PUT dentro del formData
                // Como lo hacíamos desde un formulario simple _(no ajax)_
                data.append('_method', 'PUT');
                //Enviamos la petición
                axios.post('/dashboard/avatar',data)
                .then(response => {

                })
            }
        }
    }
</script>

    Для публичного доступа к изображениям у вас будет путь

    miproyecto.com/defaults/users/avatar/hashimage
    • 7