js封装Base64数据并以文件方式提交到Ajax

Base64需要先转换为Bolb,才能通过file input方式上传

/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 * 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData){
    //var bytes=window.atob(urlData.split(',')[1]);        //如果包含data:image/png;base64,串,需要去掉url的头,并转换为byte
    var bytes=window.atob(urlData);        //去掉url的头,并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }

    return new Blob( [ab] , {type : 'image/png'});
}

Ajax上传

// 这个js函数在OC被调用
function rtnCamera(basedata) {
    var formData = new FormData();   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
    
    //convertBase64UrlToBlob函数是将base64编码转换为Blob
    formData.append("ImgeData",convertBase64UrlToBlob(basedata));  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
    formData.append("files","PhoneImg");//附加参数
    formData.append("id","123");//附加参数
    var url = "http://demo/test";

    //ajax 提交form
    $.ajax({
        url : url,
        type : "POST",
        data : formData,
        dataType:"json",
        processData : false,         // 重要!!告诉jQuery不要去处理发送的数据
        contentType : false,        // 重要!!告诉jQuery不要去设置Content-Type请求头
        cache: false,        //关闭缓存
    success: function(data) {
        console.error(data);
         }
    });
};

你可能感兴趣的:(js封装Base64数据并以文件方式提交到Ajax)