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);
         }
    });
};
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容