Отправка base64 строки с сервера на клиент

145
27 августа 2019, 04:20

Есть задача. На странице есть input type file. В него пользователь добовляет картинку. С помощью FileReader она конвертируется в base64 и вставляется в img src. На странице отобразилась картинка. В итоге я буду передавать её на сервер и сохранять в бд. А в дальнейшем когда буду редактировать запись, эта base64 строка будет передаваться на клиент и должна будет вставляется опять же в img src что бы пользователь увидел какая картинка у редактируемой записи. Для быстроты тестирования у меня пока что 1 контроллер в который передаётся base64 строка и сразу же выкидывается назад. Есть 2 тестируемые картинки, побольше и поменьше. Обе прилитают на клиент в access ajax запроса, но та которая побольше при попытки вставки в src вылетает с ошибкой, а та которая поменьше вставляется но почти вся кортинка размывается.

JS:

//Добавление нового автомобиля
    $('#modalWindow').on('click', '#btnConfirm', function () {
        $.ajax({
            type: "POST",
            url: "/Home/_AddNewCar",
            data: $('form').serialize() + "&base64img=" + $('#autoPicture').attr('src'),
            success: function (data) {
                $('#autoPicture').attr('src', data);
            },
            error: function (error) {
                alert(error.responseText);
            }
        });
    });
    //Изменение содержимого загружаемого файла
    $('#modalWindow').on('change', '#fileLoader', function () {
        ReadImageUrl(this);
    });
    function ReadImageUrl(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(input.files[0]);
            reader.onload = function (e) {
                $('#autoPicture').attr('src', e.target.result);
            }
        }
        else {
            $('#autoPicture').attr('src', '');
        }
    }

Контроллер:

[HttpPost]
        public String _AddNewCar(Car car, string base64img)
        {
            return base64img;
        }

Изначальные изображения:

1)

2)

Так вот по первому которое побольше при попытке вставить в src вылетает вот такая вот ошибка:

А по второй картинке ошибки нет но после вставки base64 в src вот что в результате выходит:

Подскажите пожалуйста, в чём может быть дело? Я ведь даже со строкой нечего не делаю, отправляю её назад сразу.

Answer 1

При прямой передаче данных на сервер необходимо что бы в строке оказывались только допустимые в url символы. Функция serialize() для формы делает это автоматически. Но в строках base64 могут встречаться не допустимые символы которые должны быть соответствующим образом закодированы при передаче. Это делается с помощью JS функции encodeURIcomponent :

....
data: $('form').serialize() 
    + "&base64img=" 
    + encodeURIcomponent($('#autoPicture').attr('src')),
....
READ ALSO
Изограмма в Javascript [закрыт]

Изограмма в Javascript [закрыт]

Нужно написать функцию,которая определяет, изограмма ли данный текст (слово) или нет, то есть в нем повторяются буквы или нет

113
Вызвать подфункцию в js

Вызвать подфункцию в js

Есть js функция модального окна внутри, которого есть такие функции как открыть, закрыть модальное окноТеперь надо при нажатии на <button class="choose">ok</button>...

112
Angular- Кастомный элемент формы, не работает formControlName

Angular- Кастомный элемент формы, не работает formControlName

Написал собственный компонент с поддержкой ReactiveFormsКогда указываю свой компонент в template и использую formControl="form

122
Визуализация наложения рамы на фото

Визуализация наложения рамы на фото

Делаю калькулятор для сайта багетной мастерскойПри выборе багета (рамы, в которую будет вставлена картина), нужно фото этого багета накладывать...

151