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

Question

I have the comic down making the conversion of a photo to base string64 sends the base via AJAX to the controller, but by moving on to the ajax, return the following error:

Photo conversion is done without errors.

Is there any way to shorten/camouflage the base to avoid this error?

Follows codes:

<script type="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>

Answer 1

Basically your problem is that you are passing Base64 in the url, this cannot, 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 in the ajax request date parameter.

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);
            }
    });
}