jqgrid изменить данные поста в строке загрузки изображения

Question

Я просто включил функцию в своем приложении, чтобы загрузить изображение, преобразовать его в base64 и отправить на сервер в виде строки base64.

Я нашел функцию для преобразования изображения в base64.Работает нормально.Я использую стандартные формы jqgrid для создания и редактирования данных.Загрузка изображений, но мне нужно изменить данные публикации перед публикацией, чтобы добавить строку base64 в значение параметра.

Я использую serializeEditData, но он работает быстрее, чем моя функция преобразует изображение в строку.Я использовал функцию обратного вызова, и она не работает.

serializeEditData: function (postData) {
            var fileContainer = document.getElementById('photo').files;
            var reader = new FileReader();
            reader.readAsDataURL(fileContainer[0]);
            reader.onload = function () {
                postData.image = reader.result;
            };

            /* I used this too 
            var fileContainer = document.getElementById('photo').files;
             getBase64(fileContainer[0], function (result) {
                 postData.image = result;
             });*/
            return postData;
        },

Если я консоль logData журнала перед оператором возврата, он показывает мне postData со строкой base64 изображения.Но проблема в том, что оператор return работает быстрее, чем заданная строка postData.image.Мой код функции getBase64:

function getBase64(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
    callback(reader.result);
};
reader.onerror = function (error) {
    console.log('Error: ', error);
};
}

И мой полный код:

 jQuery(function ($) {
    var quiz_table_id = $("#quiz_table_id");
    var quiz_pager_id = "#quiz_pager_id";
    var colNames = ['id', 'title', 'description', 'section', 'section', 'image', 'image'];
    var postDataGlobal;
    var template = {width: 160, fixed: true, align: 'center', editable: true, stype: 'text'};


    var colModel = [

        {
            name: 'id',
            index: 'id',
            sortname: 'id',
            editable: true,
            sorttype: 'number'
        },
        {
            name: 'title',
            index: 'title',
            sortname: 'title',
            template: template,
            sorttype: 'number'
        },
        {
            name: 'description',
            index: 'description',
            sortname: 'description',
            width: 120,
            fixed: true, align: 'center', editable: true,
            template: "number",
            sorttype: 'number'
        },
        {
            name: 'section.name',
            sortname: 'section.name',
            formatter: null,
            sorttype: 'number',
            editable: false

        },
        {
            name: 'section.id',
            sortname: 'section.id',
            formatter: 'select',
            edittype: "select",
            hidden: true,
            editable: true,
            editrules: {edithidden: true, required: true},
            editoptions: {value: "1:Java"}
            /*editoptions: {
                dataInit: function (elem) {
                    $.get("http://localhost:8080/section/get-all-map", function (data, status) {
                        $(elem).empty();
                        Object.keys(data).map(function (key, index) {
                            console.log(data[key] + " " + key);
                            $(elem).append("<option value=" + key + ">" + data[key] + "</option>")
                        });
                    });
                }
            }*/


        },
        {
            name: 'image',
            index: 'image',
            sortname: 'image',
            template: template,
            sorttype: 'number',
            editable: true
        },
        {
            name: 'photo',
            index: 'photo',
            search: false,
            editable: true,
            edittype: 'file',
            editoptions: {
                enctype: "multipart/form-data"
            },
            align: 'center',
        }

    ];

    quiz_table_id.jqGrid({
        url: 'http://localhost:8080/quiz/get-all',
        datatype: "json",
        jsonReader: {
            repeatitems: true
        },
        height: 'auto',
        colNames: colNames,
        colModel: colModel,
        shrinkToFit: false,
        forceFit: true,
        pager: quiz_pager_id,
        toppager: true,
        rowNum: 10,
        rowList: [5, 10, 15, 20, 25, 30],
        loadonce: true,
        colMenu: true,
        menubar: true,
        viewrecords: true,
        storeNavOptions: true,
        editurl: 'http://localhost:8080/quiz/save',
        loadComplete: function () {

        },
        gridComplete: function () {
        }
    });

//navButtons
    quiz_table_id.jqGrid('navGrid', quiz_pager_id,
        // the buttons to appear on the toolbar of the grid
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            refresh: true,
            view: true,
            position: "left",
            cloneToTop: false
        },
        // options for the Edit Dialog
        {
            editCaption: "The Edit Dialog",
            recreateForm: true,
            checkOnUpdate: true,
            checkOnSubmit: true,
            closeAfterEdit: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            },
            serializeEditData: function (postData) {
                var fileContainer = document.getElementById('photo').files;
                var reader = new FileReader();
                reader.readAsDataURL(fileContainer[0]);
                reader.onload = function () {
                    postData.image = reader.result;
                };

                /* I used this too
                var fileContainer = document.getElementById('photo').files;
                 getBase64(fileContainer[0], function (result) {
                     postDataGlobal.image = result;
                 });*/
                return postData;
            },
            beforeSubmit: function (data) {
                 return [true, ''];
            }

        },
        // options for the Add Dialog
        {
            closeAfterAdd: true,
            recreateForm: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        },
        // options for the Delete Dailog
        {
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        },
        {
            multipleSearch: true,
            showQuery: true
        } // search options - define multiple search
    );


    $(window).triggerHandler('resize.jqGrid');
    quiz_table_id.triggerHandler("jqGridAfterGridComplete");

});

function getBase64(file, callback) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        callback(reader.result);
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}