Número de lecturas: 1278
{lang: 'es-419'}

Luego de tener instalado VueJS en este caso con webpack se agrega el componente:

//CargaFoto.vue
<div class="hello">
<h1>{{ msg }}</h1>
<div class="container">
<div class="large-12 medium-12 small-12 cell"><label>File <input id="file" type="file" /> </label> <button>Submit</button></div>
</div>
</div>
<script>
    import axios from 'axios'
 
    export default {
        name: "CargaFoto",
        data() {
            return {
                msg: "Cargar Imagen de Perfil",
                file: ''
                //selectedFile: null
            };
        },
        methods: {
            submitFile(){
                /*
                        Initialize the form data
                    */
                let formData = new FormData();
 
                /*
                    Add the form data we need to submit
                */
                formData.append('file', this.file);
 
                /*
                  Make the request to the POST /single-file URL
                */
                axios.post( '/usuario/jsonimagen',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function(){
                    console.log('SUCCESS!!');
                })
                    .catch(function(){
                        console.log('FAILURE!!');
                    });
            },
 
            /*
              Handles a change on the file upload
            */
            handleFileUpload(){
                this.file = this.$refs.file.files[0];
            }
        }
    };
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
 
<style>
    #fileInput {
        display: none;
    }
    h1,
    h2 {
        font-weight: normal;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }
    .my-8 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
</style>

 

En el archivo donde se recoge los datos quedo asi el controlador:

//src/UsuarioController.php
/**
 * @return JsonResponse
 * @Route("/jsonimagen", name="jsonimagen", methods="POST")
 
 */
public function jsonimagen(Request $request):JsonResponse
{
    $usuario = $this-&gt;getUser();
    $data = $request-&gt;files-&gt;get('file');
    $fileName = $usuario.'.'.$data-&gt;guessExtension();
    // moves the file to the directory where usuarios are stored
    $data-&gt;move(
        $this-&gt;getParameter('usuarios_directorio'),
        $fileName
    );
    echo $data; exit;
    return $this-&gt;json($data);
}

Tambien configure la ruta donde se va a cargar las imagenes en el archivo

//services.yaml
parameters:
    locale: 'en'
    usuarios_directorio: '%kernel.project_dir%/public/uploads/usuarios'

Acá se puede ver la imagen cargada en esta captura.

 

Referencia

Be Sociable, Share!