0

deseo validar que se carger solo imagenes y evitar que cargen otro tipo de archivos, de antemano gracias quien me puedo ayudar.

//formulario

parte donde selecciono imagen

//parte de mi vista

<div class="col-3">
                        <div class="col-12">

                            <form>
                            <div >
                                <label class="file-upload btn btn-sm btn-primary float-right" style="width: 30px;">
                                    ... <input type="file" @change="onFileChange" accept=".jpg"/>
                                </label>
                            </div>
                            </form>

                        </div> 
                        <div>
                           <img :src="'data:image/jpeg;base64,'+ mantenimientos.l_logo" alt="..." class="img-thumbnail" style="width: 170px; height: 113px;"> 
                        </div>


                    </div>

//vuejs metodo para seleccionar e cargar imagen

methods: {
    onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
        return;
          this.createImage(files[0]);  
    },
    createImage(file) {
        var image = new Image();
        var reader = new FileReader();

        reader.onload = (e) => {
            this.mantenimientos.l_logo = ((e.target.result).split(","))[1];
        };
        reader.readAsDataURL(file);
    }

},

1 respuesta 1

1

Puedes verificar el type del archivo.

methods: {
onFileChange(e) {
    var files = e.target.files || e.dataTransfer.files;
    if (!files.length && !(files[0].type == 'image/png' || files[0].type == 'image/jpg' ...))
        return;
      this.createImage(files[0]);  
},
createImage(file) {
    var image = new Image();
    var reader = new FileReader();

    reader.onload = (e) => {
        this.mantenimientos.l_logo = ((e.target.result).split(","))[1];
    };
    reader.readAsDataURL(file);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.