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

How to upload image from VueJS to Laravel with Axios?

  • 772

I have to change the user's profile image, I am using Vuejs for this purpose, the problem is that it passes the image to me base64and when I do decode in the method of myProfilethe controller it is simple or it saves the number 1 in the avatar field of the table useror just pass it null.

profile.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>

Note: When I occupy an FormData()avatar it happens to me empty

myProfileI have already made so many changes to the method that in the end I leave it like this to see how they can guide me.

myProfile (UserController)

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);

}

I have seen several tutorials but I have not yet reached the solution that fits what I need.

Any ideas? I am using Laravel 5.6, Vuejs 2and Axios.

laravel

1 Answers

  1. Best Answer

    To upload images with axiosthe by method PUT, you can "trick" and send by postfrom vue, but in Laravel access the PUT. (there may be better ways to do it but it remains for investigation :) )

    The first recommendation for storing the images would be to continue using the storagebut as I notice it tries to store directly in the project's public folder which is not entirely correct, but for the example we will continue with this configuration.

    config\filesystems.phpFor this, in the default file the driverstorage is localthen you must change the value of the rootstorage folder for the local key using public_paththat it will be equal to the publicproject folder and within this we specify to Laravel that there will be a folderdefaults

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

    In the controller it could just stay.

    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 , (code explanation is included)

    <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>

    To publicly access the images you would have the path

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