0

Al usar webcamjs con vuejs obtengo la imagen con la función webcam.snap y la quiero pasar en una función axios que se llama registroFruta, pero al ejecutar todo esto me aparece el siguiente error:

main.js:721 Uncaught (in promise) TypeError: this.registroFruta is not a function

No me reconoce la función con axios a la que intento mandar la imagen, con esto mando los datos a un ajax para invocar en este al controlador y del controlador al modelo, pero por el error no pasa ni al axios, no entiendo por qué no reconoce a la función registro

     pesoFruta (idProd, peso){
        if( (idProd != 0) && (peso != '')){
            Swal.fire({
                html: '<div class="d-flex justify-content-center"><div id="my_camera"></div></div>',
                focusConfirm: true,
                showCloseButton: true,
                allowOutsideClick:false,
                allowEscapeKey: true,
                allowEnterKey: false,
                confirmButtonText:'<i class="zmdi zmdi-camera text-white"></i>&nbsp;Capturar Foto',
                confirmButtonColor: "#0CAF1B",
                cancelButtonText:'Cancelar',
                width: '40%',
                grow: 'column'
            }).then((result) => {
                if (result.value) {
                    // actually snap photo (from preview freeze) and display it
                    Webcam.snap( function(data_uri) {
                        this.registroFruta(idProd, peso, this.embActual, this.fecha_dia, data_uri);
                        console.log(this.registroFruta)
                    });                        
                }
            });
            Webcam.set({
                width: 512,
                height: 384,
                dest_width: 512,
                dest_height: 384,
                image_format: 'png',
                jpeg_quality: 90,
                force_flash: false
            });
            Webcam.attach( '#my_camera' );
        }else{
            Swal.fire({
                title: 'Datos incompletos',
                type: 'error',
                text: 'Ingrese el Productor y el Peso antes de capturar la Foto.'
            });
        }
    }, 



 registroFruta (prod, peso, embarque, fecha, img){
        axios.post(url_embarque, {option:6, id:prod, peso: peso, embarque:embarque, fecha:fecha, img: img}).then(response =>{
            this.listaFutas();
        });
    },

2 respuestas 2

0

La instancia this debe ser guardada en una variable ya que a ese nivel no puede ser utilizada de esa forma

Lo puedes solucionar de la siguiente forma:

  pesoFruta(idProd, peso) {
    var _self = this;
    if ((idProd != 0) && (peso != '')) {
      Swal.fire({
        html: '<div class="d-flex justify-content-center"><div id="my_camera"></div></div>',
        focusConfirm: true,
        showCloseButton: true,
        allowOutsideClick: false,
        allowEscapeKey: true,
        allowEnterKey: false,
        confirmButtonText: '<i class="zmdi zmdi-camera text-white"></i> Capturar Foto',
        confirmButtonColor: "#0CAF1B",
        cancelButtonText: 'Cancelar',
        width: '40%',
        grow: 'column'
      }).then((result) => {
        if (result.value) {
          // actually snap photo (from preview freeze) and display it
          Webcam.snap(function (data_uri) {
            _self.registroFruta(idProd, peso, _self.embActual, _self.fecha_dia, data_uri);
            console.log(_self.registroFruta)
          });
        }
      });
      Webcam.set({
        width: 512,
        height: 384,
        dest_width: 512,
        dest_height: 384,
        image_format: 'png',
        jpeg_quality: 90,
        force_flash: false
      });
      Webcam.attach('#my_camera');
    } else {
      Swal.fire({
        title: 'Datos incompletos',
        type: 'error',
        text: 'Ingrese el Productor y el Peso antes de capturar la Foto.'
      });
    }
  },


  registroFruta(prod, peso, embarque, fecha, img) {
    var _self = this;
    axios.post(url_embarque, {
      option: 6,
      id: prod,
      peso: peso,
      embarque: embarque,
      fecha: fecha,
      img: img
    }).then(response => {
      _self.listaFutas();
    });
  },

Como puedes observar, almacene la instancia this en una nueva variable llamada _self para que así no de error.

1
  • Muchas gracias! ya funciona gracias a tu consejo Commented el 10 may. 2020 a las 21:59
0

Utiliza el formato Typescript para tus funciones:

     const myFunc = (args) => {
    //my function code here
}

O el formato tradicional:

function myFunc (args){
    //my function code here
}

(Recuerda que la funcion debe estar declarada antes que se utilice)

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.