Javascript Promise问题

如何解决Javascript Promise问题

我正在使用drag n drop上传图片，并使用croppie插件对其进行裁剪。另外，如果用户选择了错误的图像并想要更改它，则可以使用一个browse again按钮来切换回drag n drop状态。

当我使用jquery代码执行此操作时，一切工作正常。但是，我试图将代码重构为使用Javascript Promise，它只是第一次运行。

承诺代码：

const dragDrop = (params,element) => {
    return new Promise((resolve,reject) => {
        $(element || '.drag-drop').on('dragover',(e) => {
            e.preventDefault();
        }).on('dragleave',(e) => {
            e.preventDefault();
        }).on('drop',(e) => {
            e.preventDefault();

            let fileList = e.originalEvent.dataTransfer.files;
            let conditions = $.extend({},{
                files: 1,fileSize: (1024 * 1024 * 5),type: ["image/gif","image/jpeg","image/jpg","image/png"],extension: ["gif","jpeg","jpg","png"]
            },(params || {}));

            if (fileList.length > conditions.files)
            {
                reject('Please choose only ' + conditions.files + ' file(s)');
            }
            else if (fileList[0].size > (conditions.fileSize))
            {
                reject('File to large.!<br>Allowed: ' + (conditions.fileSize) + 'MB');
            }
            else
            {
                if (fileList[0].type == '')
                {
                    let ext = (fileList[0].name).split('.');

                    if ($.inArray(ext[ext.length - 1],conditions.extension) < 0)
                    {
                        reject('File type not allowed');
                    }
                }
                else if ($.inArray(fileList[0].type,conditions.type) < 0)
                {
                    reject('File type not allowed');
                }
            }

            resolve(fileList);
        });
    })
};

拖放代码：

dragDrop().then((files) => {
    croppie({
        url: 'url to upload',data: {
            token: "user identification token string"
        }
    },files);
}).catch((message) => {
    alert(message);
});

作物代码：

function croppie(ajax,files,croppie,el)
{
    // variables
    let $image = $((el.image !== undefined) ? el.image : 'div.js-image');
    let $button = $((el.button !== undefined) ? el.button : '.js-crop-button');
    let $dragDrop = $((el.dragDrop !== undefined) ? el.dragDrop : '.drag-drop');
    let $browseButton = $((el.browse !== undefined) ? el.browse : '.js-browse');

    $imageCrop = $image.croppie($.extend(true,{
        enableExif: true,enableOrientation: true,viewport: {
            width: 200,height: 200,type: 'square'
        },boundary: {
            height: 500
        }
    },croppie)).removeClass('d-none');

    var reader = new FileReader();

    reader.onload = (event) => {
        $imageCrop.croppie('bind',{
            url: event.target.result
        });
    }
    reader.readAsDataURL(files[0]);

    $image.parent().removeClass('d-none');
    $button.removeClass('d-none');
    $dragDrop.addClass('d-none');

    $('.js-rotate-left,.js-rotate-right').off('click').on('click',function (ev) {
        $imageCrop.croppie('rotate',parseInt($(this).data('deg')));
    });

    $browseButton.off('click').on('click',function() {
        $image.croppie('destroy');
        $image.parent().addClass('d-none');
        $button.addClass('d-none');

        $dragDrop.removeClass('d-none');
    });

    $button.off('click').on('click',() => {
        $imageCrop.croppie('result',{
            type: 'canvas',size: 'viewport'
        }).then((response) => {
            ajaxRequest($.extend(true,{
                data: {
                    "image": response,},success: (data) => {
                    (data.success == true)
                        ? window.parent.location.reload()
                        : alert(data.message);
                }
            },ajax));
        });
    });
}