JavaScript AJAX上传base64图片

• ， 1 3月 2019
• 作者 hliang
• TypeScript/JavaScript

JavaScript AJAX上传base64图片

下面代码可以通过Ajax请求，直接向一个正常的文件上传接口提交请求，上传已经base64编码的图片文件。

直接贴代码：

function ajaxSubmitImageFile(base64Codes) {
    let convertBase64UrlToBlob = function(urlData) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bytes = window.atob(urlData.split(',')[1]); // 去掉url的头，并转换为byte

        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }

        return new Blob([ab], { type: mime });
    };

    let getFileExt = function(urlData) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        return mime.replace('image/', '');
    };

    let deferred = $.Deferred();

    // let form = document.forms[0];
    // var formData = new FormData(form);   // 这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数

    let formData = new FormData();

    let fileExt = getFileExt(base64Codes);

    // convertBase64UrlToBlob函数是将base64编码转换为Blob
    formData.append(
        'upfile',
        convertBase64UrlToBlob(base64Codes),
        'file_' + Date.parse(new Date()) + '.' + fileExt
    ); // append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同

    // ajax 提交form
    $.ajax({
        url:
            window.location.origin +
            '/article/ueditor/asp/controller.asp?action=uploadimage',
        type: 'POST',
        data: formData,
        // dataType: "text",
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头

        success: function(data) {
            // console.log(data);
            if (data) {
                data = JSON.parse(data);
                if (data.state === 'SUCCESS') {
                    deferred.resolve(window.location.origin + data.url);
                } else {
                    deferred.reject('error');
                }
            } else {
                deferred.reject('error');
            }

            // window.location.href = "${ctx}" + data;
        },
        xhr: function() {
            // 在jquery函数中直接使用ajax的XMLHttpRequest对象
            let xhr = new XMLHttpRequest();

            xhr.upload.addEventListener(
                'progress',
                function(evt) {
                    if (evt.lengthComputable) {
                        let percentComplete = Math.round(
                            (evt.loaded * 100) / evt.total
                        );
                        window.console.log(
                            '正在提交.' + percentComplete.toString() + '%'
                        ); // 在控制台打印上传进度
                    }
                },
                false
            );

            return xhr;
        }
    });

    return deferred.promise();
}