C'est La Vie

    人生无彩排,每一天都是现场直播!

    JavaScript AJAX上传base64图片

    下面代码可以通过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();
    }
    

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用*标注