Photo conversion to base64 with error 414 (Request-URI Too Long)

1

I have the below code that does the conversion from a photo to base string64 sends the base via AJAX to the controller , however when you switch to the ajax, I return the following error:

Photo conversion is done without errors.

Isthereanywaytoshorten/camouflagethebaseinordertoavoidthiserror?

Followingcodes:

<scripttype="text/javascript">
    $(document).ready(function () {

    });
    function mostraImagem(img) {
        if (img.files && img.files[0]) {
            var fileExtension = ['jpeg', 'jpg', 'png', 'bmp'];
            if ($.inArray($(img).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                swal('', 'Formato do arquivo inválido! Somente JPG, JPEG, PNG, BMP são permitidos.', 'warning');
                $("#FileUpload1").val('');
                $("#imgImage").val('');
                return false;

                sizes = input.files[0].size;
                if (parseInt(sizes) > 100000) {
                    swal("", "Tamanho do arquivo inválido! Tamanho máximo permitido 100 KB", 'warning');
                    $("#FileUpload1").val('');
                    $("#imgImage").val('');
                    return false;
                }
            }
            var reader = new FileReader();
            var imgConvertida = null;
            var imagem = document.getElementById("imgImage");
            reader.onload = function (e) {
                imagem.src = e.target.result;
                imgConvertida = imagem.src;
            };
        }
        reader.readAsDataURL(img.files[0]);
        SetarImagem(imgConvertida);
    }
    function SetarImagem(imgConvertida) {
        $.ajax({
                type: "POST",
                url: "/MeusDados/SetarImagem?img=" + imgConvertida,
                //data: "{'img': '" + img + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (data) {
                    //alert(data);
                }
            });

        }

</script>


<div class="dois_quintos">
    <input type="file" ID="FileUpload1" onChange="mostraImagem(this);" />
    <br />
    @if (Model.CliFoto != null)
    {
        <img ID="imgImage" src="data:image/jpg;base64, @Convert.ToBase64String(Model.CliFoto)" style="width: 143px; height: 138px;" />
    }
    else
    {

        <img ID="imgImage" src="~/images/avatarDefault.png" style="width: 143px; height: 138px;" />
    }

</div>
    
asked by anonymous 25.04.2018 / 16:59

1 answer

2

Basically your problem is that you are passing the base64 in the url, this can not because the url has a maximum size. That's why you get the error mentioned in your question.

To solve your problem the only way is to pass the base64 stirng to the date parameter of the ajax request.

function SetarImagem(imgConvertida) {
    var vData = {
        img: imgConvertida
    };

    $.ajax({
            type: "POST",
            url: "/MeusDados/SetarImagem,
            data: vData,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                //alert(data);
            }
    });
}
    
25.04.2018 / 19:03