3

estoy teniendo un problema al convertir de base64 a string. Estoy trabajando en una aplicacion en la cual una de las opciones es

1-Sacar una foto

2-Convertir a base64

3- Enviar este dato hacia mi api en c#

4-Desde mi api enviarlo a mi tabla en SQL.

Mi problema es al recibir los datos en mi api.. Desde mi frontend le envío una variable con un "tipo de dato" de base64, pero no puedo lograr pasarlo a mi tabla de base de datos, no lo recibe.. No se si es por el tipo de variable o que.. En mi tabla sql utilzio varchar(max) En mi api tengo un string foto que es el que recibe el dato desde mi frontend.

public bool InsertarDatos(int idComprobante, string fecha, string foto, string comentarios)
    {

        string strCon = ConfigurationManager.ConnectionStrings["MiConexion"].ConnectionString;
        SqlConnection conexion = new SqlConnection(strCon);
        bool esta = false;
        string query = "INSERT INTO EnvioDeposito(idComprobante,fecha,foto,comentarios) VALUES (@idComprobante,@fecha,@foto,@comentarios)";
        SqlCommand comando = new SqlCommand(query, conexion);
        comando.Parameters.AddWithValue("@idComprobante", idComprobante);
        comando.Parameters.AddWithValue("@fecha", fecha);
        comando.Parameters.AddWithValue("@foto", foto);
        comando.Parameters.AddWithValue("@comentarios", comentarios);
        try
        {
            conexion.Open();
            int filas = comando.ExecuteNonQuery();
            if (filas > 0)
            {
                esta = true;
            }
        }
        catch (SqlException ex)
        {
            Console.WriteLine(ex.Message);
        }
        finally
        {
            conexion.Close();   
        }
        return esta;
    }

A este método yo le hago una llamada en mi frontend con Ajax. Funciona todo bien, el único problema es cuando le paso a string foto una variable con base64!

He probado utilizando Convert.ToBase64String y Convert.FromBase64String y no me ha funcionado tampoco.

Este es mi codigo en frontend que utilizo js y jquery.

Convierto en base64 y por debajo realizo la peticion Ajax.

var gImg;

function SacarFoto() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });

    function onSuccess(imageData) {
        $("#fotoCapturada").html('<img src="data:image/jpeg;base64,' + imageData + '" width=100% >');
        gImg = imageData;
        //    copyFile(imageURI, 'MiFoto.jpg', LocalFileSystem.TEMPORARY) // no se que funcion cumple esto
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }
};


function EnvioDatosDeposito(idComprobante, fecha, foto, comentarios) {
    var dir = "InsertarDatos";
    var datos = {
        idComprobante: idComprobante,
        fecha: fecha,
        foto: foto,
        comentarios: comentarios
    };
    $.ajax({
        type: 'POST',
        url: api + dir + "?idComprobante=" + idComprobante + "&fecha=" + fecha + "&foto=" + foto + "&comentarios=" + comentarios,
        data: datos,
        success: function(esta) {
            if (esta == true) {
                $("#pMensaje").html("Datos enviados satisfactoriamente")
            } else {
                $("#pMensaje").html("Ha ocurrido un error en el envio de datos")
            }
        },
        error: function() {
            alert("error en ajax");
        }
    });
}


function Enviar() {
    var txtidComprobante = $("#idComprobante").val();
    var txtfecha = $("#dtFecha").val();
    var txtcomentarios = $("#txtComentarios").val()
    EnvioDatosDeposito(txtidComprobante, txtfecha, gImg, txtcomentarios);
}

7
  • 1
    Puedes indicar el código Ajax donde realizas la llamada al método? Commented el 1 oct. 2019 a las 12:22
  • si recién edite! ahi lo muestro
    – tato8vio
    Commented el 1 oct. 2019 a las 12:26
  • Te da algún error?. podrías indicarlo también. Commented el 1 oct. 2019 a las 12:32
  • si el error que me da es cuando le paso el base64 a string foto, que me llama al error de ajax.. Osea que no esta llegando bien ese dato. Porque si yo a string foto le asigno cualquier cosa(palabra) me llena bien la tabla de bd.. Pero con base64 No
    – tato8vio
    Commented el 1 oct. 2019 a las 12:36
  • Es probable que te este retornando el error Maximum request length exceeded debido a que base64 es un string muy largo. En la consulta verifica el error que esta lanzando el ajax y dinoslo.
    – Einer
    Commented el 1 oct. 2019 a las 12:43

2 respuestas 2

3

Tu problema radica en que está enviando el string en Base64 en el QueryString al estilo GET.

Tu string en Base64 es demasiado largo para enviarlo de esta manera, así que deberás enviarlo en el cuerpo de la petición al estilo POST.

En primer lugar, quita la variable "&foto=" + foto de la URL de la petición AJAX:

url: api + dir + "?idComprobante=" + idComprobante + "&fecha=" + fecha + "&comentarios=" + comentarios,

Y envíala en el cuerpo de la petición, o sea, en el objeto data: datos. Aunque veo que esto ya lo estás haciendo (estás enviando los datos dos veces)

var datos = {
    idComprobante: idComprobante,
    fecha: fecha,
    foto: foto,
    comentarios: comentarios
};

Por último, en la Acción del Controlador de tu Web API, debes indicar que la variable string foto debes de obtenerla del cuerpo de la petición [FromBody]

public bool InsertarDatos(int idComprobante, string fecha, [FromBody]string foto, string comentarios)
6
  • Gracias por tu respuesta pero no lo he podido resolver, tu me dices que mi metodo en api debe quedar asi? public bool InsertarDatos(int idComprobante, string fecha, [FromBody]string foto, string comentarios) ??
    – tato8vio
    Commented el 1 oct. 2019 a las 13:42
  • @tato8vio: Que tipo de Api tienes?. Es un Web API de ASP.NET? Commented el 1 oct. 2019 a las 13:43
  • Si es asi! Ahora el resultado que me esta dando es false, pero lo bueno es que esta llegando a mi api
    – tato8vio
    Commented el 1 oct. 2019 a las 13:44
  • ahora me tira el error "Ha ocurrido un error en el envio de datos" , que por lo menos se que es dentro del ajax..
    – tato8vio
    Commented el 1 oct. 2019 a las 13:50
  • @tato8vio: Contesta a esto por favor. Que tipo de Api tienes?. Es un Web API de ASP.NET? Commented el 1 oct. 2019 a las 13:51
0

Cuando usas ajax, ya estás mandando un "payload" de información sin necesidad de la url cuando estableces data, por lo tanto, lo primero que haría sería eliminar toda la query string de la misma:

$.ajax({
    type: 'POST',
    url: api + dir,
    data: datos,
    ...
});

Segundo, dentro de data ¿no sería foto: gImg?:

var datos = {
    idComprobante: idComprobante,
    fecha: fecha,
    foto: gImg,
    comentarios: comentarios
};

Ahora bien, para mandar un archivo, puedes intentarlo a través de FormData para que sea más "natural" obtener los datos en tu servidor:

var datos = new FormData();
datos.append("idComprobante", idComprobante);
datos.append("fecha", fecha);
datos.append("foto", gImg);
datos.append("comentarios", comentarios);

$.ajax({
    type: 'POST',
    url: api + dir,
    data: datos,
    processData: false,
    contentType: false,
    ...
});

Para recibirlos en el servidor C#, debes crear un modelo de la información de tu formulario:

internal class FormularioFotoModel
{
    public int idComprobante { get; set; }
    public DateTime fecha { get; set; }
    public string foto { get; set; } // La foto ya es un string
    public string comentarios { get; set; }
}

public TuController : ApiController
{
    public void PostInsertaDatos(FormularioFotoModel data)
    {
        ...
    }
}

Por último, asumiendo que estás usando SQL Server, yo te recomendaría que cambiaras el tipo de dato de varchar a varbinary en tu tabla y ejecutaras el INSERT en un procedimiento almacenado donde conviertas una cadena de texto en datos binarios. Para ello, puedes usar la siguiente función:

CREATE FUNCTION [dbo].[F_GetBinFromBase64String]
(
    @Valor VARCHAR(MAX)
)
RETURNS VARBINARY(MAX)
AS
BEGIN
    -- Declare the return variable here
    DECLARE @Return VARBINARY(MAX);

    SET @Return = CAST(N'' AS XML).value('xs:base64Binary(sql:variable("@Valor"))', 'VARBINARY(MAX)');

    -- Return the result of the function
    RETURN @Return;
END

y usarla en el procedimiento así:

CREATE PROCEDURE [dbo].[CP_SubirFoto]
    @idComprobante INT,
    @fecha DATETIME,
    @foto NVARCHAR(MAX),
    @comentarios VARCHAR(MAX)
AS
BEGIN
    SET NOCOUNT ON;

    BEGIN TRANSACTION [Trans_Deposito];
    BEGIN TRY
        DECLARE @FotoVal VARBINARY(MAX);
        EXECUTE @FotoVal = F_GetBinFromBase64String @foto; -- <- Aquí se usa la función
        INSERT INTO EnvioDeposito(idComprobante,fecha,foto,comentarios)
               VALUES (@idComprobante, @fecha, @FotoVal, @comentarios);
        COMMIT;
    END TRY
    BEGIN CATCH
        ROLLBACK;
        SELECT  
             ERROR_NUMBER() AS ErrorNumber
            ,ERROR_SEVERITY() AS ErrorSeverity
            ,ERROR_STATE() AS ErrorState
            ,ERROR_PROCEDURE() AS ErrorProcedure
            ,ERROR_LINE() AS ErrorLine
            ,ERROR_MESSAGE() AS ErrorMessage;
    END CATCH
END

Esto te permitiría hacer algo así tu petición:

public void PostInsertaDatos(FormularioFotoModel data)
{
    string strCon = ConfigurationManager.ConnectionStrings["MiConexion"].ConnectionString;
    SqlConnection conexion = new SqlConnection(strCon);
    bool esta = false;
    string query = "EXECUTE CP_SubirFoto";
    SqlCommand comando = new SqlCommand(query, conexion);
    comando.CommandType = CommandType.StoredProcedure;
    comando.Parameters.AddWithValue("@idComprobante", data.idComprobante);
    comando.Parameters.AddWithValue("@fecha", data.fecha);
    comando.Parameters.AddWithValue("@foto", data.foto);
    comando.Parameters.AddWithValue("@comentarios", data.comentarios);
    try
    {
        conexion.Open();
        int filas = comando.ExecuteNonQuery();
        if (filas > 0)
        {
            esta = true;
        }
    }
    catch (SqlException ex)
    {
        Console.WriteLine(ex.Message);
    }
    finally
    {
        conexion.Close();   
    }
    return esta;
}
2
  • 1
    muchas gracias por tu respuesta, lo he podido resolver realizando estas cosas que me indicaste. No me fue necesario hacer esos procedimientos en SQL. Me di cuenta que mi problema no estaba alli, sino era que a mi api llegaban null los parametros.
    – tato8vio
    Commented el 2 oct. 2019 a las 11:57
  • @tato8vio Efectivamente no era necesario lo del procedimiento, solo es una recomendación. ¡Me alegra que te sirviera! Commented el 4 oct. 2019 a las 22:54

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.